Question

我正在尝试显示正确显示的图标的相应输入。我将所有元素组织为对象，并创建了匹配匹配图标的ID的键。然后我将元素创建为匹配的相应输入。

我的问题是，当我点击图标时，没有任何输出。我没有收到任何错误，我的console.log向我显示了循环结果。

有谁看到我做错了什么？如果单击蓝色Zillow图标，则输入带占位符＆＃34; Zillow＆＃34;应该出现。与房地产经纪人一样，除了与房地产经纪人输入/图标相关联。

＆＃13;

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 () {
});

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 2

而不是使用

if (reviewIconClicked == reviewInputs) {

试

reviewInputs['reviewIconClicked']

当被点击的元素的id等于object元素时输出元素

2 个答案: