2017-06-23 63 views
-1

我正在尝试为显示的正确图标显示相应的输入。我将所有元素组织为一个对象,并创建了匹配匹配图标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>

回答

1

你只需要检查,如果点击的元素的ID是你对象的属性。

无需循环。

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'); // Maybe used... 
 
    var reviewIconClicked = $(this).attr('id'); 
 
    
 
    if(reviewInputs.hasOwnProperty(reviewIconClicked)){ 
 
    $('#review-site-edit').find("input[type='url']").remove(); 
 
    $('#review-site-edit').append(reviewInputs[reviewIconClicked]); 
 
    } 
 
});
<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>

+0

它不是做相同的片段? –

+0

*“添加到DOM»*是什么意思? –

+0

难道你只需要一个输入...所以以前应该被删除? –

-1

而不是使用

if (reviewIconClicked == reviewInputs) { 

的尝试

reviewInputs['reviewIconClicked']