Question

HTML：

<input type="text" name="name" id="name_1" value="" class="showimage" />
<div class="icon_1" id="icon"  style="display:none;"></div>
<input type="text" name="name" id="name_2" value="" class="showimage" />
<div class="icon_2" id="icon"  style="display:none;"></div>

JQuery的：

<script type="text/javascript">
$(document).ready(function() {

  // Add onclick handler to checkbox w/id checkme

  $('.showimage').click(function() {

    var id = $(this).attr('id');

    var ret = id.split("_");
    var str1 = ret[1];

    //alert(str1);
    var id = $(this).attr('id');
    var ret = id.split("_");
    var str2 = ret[1];

    //alert(str2);

    //$(".icon_"+id).show();
    // $("#icon").show();

    if (str1 == str2) {
      alert(str1);
      $(".icon_" + str1).show();
      //exit;
      //alert("hi")
    } else {
      alert("sec");
      $(".icon_" + str1).hide();
    }
  });
});
</script>

为什么不隐藏其他部分

Answer 1

您的问题：为什么不隐藏其他部分？

这是因为$(this)它引用了当前元素，它已经获得了事件引发的选择器上下文。所以，

'.print_r($bundleProduct,true).'

上述变量已被使用了两次，两者都指向同一个对象。所以在if条件中：

var id = $(this).attr('id');

两个值始终相同，因此永远不会执行if (str1 == str2) {。

最好将else事件与.focus()/.blur()：

一起使用

.toggle(condition)

$(function(){
  $('.showimage').on('focus blur', function(e){
     $(this).next('div').toggle(e.type === "focus")
  })
});

Answer 2

input[type="text"] {} input[type="text"] + div {
  display: none;
}
hr {} input[type="text"]:focus + div {
  display: inline-block;
  /* added for style you can also use display:block */
}

<input type="text" name="name" id="name_1" value="" class="showimage" />
<div class="icon_1" id="icon">test1</div>
<hr>
<input type="text" name="name" id="name_2" value="" class="showimage" />
<div class="icon_2" id="icon">test2</div>

如何根据此编码显示隐藏

2 个答案: