我正在尝试为显示的正确图标显示相应的输入。我将所有元素组织为一个对象,并创建了匹配匹配图标ID的密钥。然后,我将该元素创建到适当的输入以匹配。当单击元素的ID等于对象元素时输出元素
我的问题是,当我点击图标时,没有输出。我没有收到任何错误,我的console.log
向我展示了循环结果。
有没有人看到我做错了什么?如果您单击蓝色的Zillow图标,则应显示带有占位符“Zillow”的输入。与房地产经纪人一样,除了与房地产经纪人输入/图标相关。
var reviewInputs = {
"zillow-review": '<input type="url" id="zillow-input" placeholder="Zillow">',
"realtor-review": '<input type="url" id="realtor-input" placeholder="Realtor">'
};
$('.review-icon-select').click(function() {
$('#review-site-edit-wrap').addClass('active');
var reviewIconClicked = $(this).attr('id');
$.each(reviewInputs, function(key, element) {
console.log('key: ' + key + '\n' + 'value: ' + element);
if (reviewIconClicked == reviewInputs) {
reviewInputs.forEach(function(site) {
$('#review-site-edit').append.reviewInputs[element];
});
}
});
//$(reviewIconClicked':contains("SomeText")').each(function() {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="review-icon-select" id="zillow-review"><img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow"></li>
<li class="review-icon-select" id="realtor-review"><img src="https://s3.amazonaws.com/retain-static/www/realtor.com.png" alt="Realtor.com"></li>
<div id="review-site-edit"></div>
它不是做相同的片段? –
*“添加到DOM»*是什么意思? –
难道你只需要一个输入...所以以前应该被删除? –