Question

这可能看起来很简单。但是我花了差不多5小时就找不到了。我在<c:foreach>

中有以下html元素

<a href="#" class="helpTip1" id="removeId">
                        <span id="helptext1" class="help_txt1">
                        <span class="help_txt1"  id="helptxtContent">
                                help text goes here                         </span>
            </span>
           </a>

然后我有以下jquery。

var hide = false;
 $(document).ready(function () {

$("#removeId").click(function(){


    if(hide==true){
        $("#helptxt1").fadeIn('slow');
        $("#helptxtContent").fadeIn(function(){hide = false;});

    }
    if(hide==false){
        $("#helptxt1").fadeOut('slow');
        $("#helptxtContent").fadeOut(function(){hide=true;});

    }
});
});

问题是只有当我点击带有id=removeid的第一个elelmetn时，帮助文字才会消失。当我点击第二个元素时（因为它在C：foreach内），这个jquery不起作用。

请帮帮我。

Answer 1

在jquery（）;
中使用fadeToggle

  $("#removeId").click(function(){

        $("#helptxt1").fadeToggle('slow');
        $("#helptxtContent").fadeToggle('slow');

});

Answer 2

由于您有多个重复ID，因此您的点击事件处理程序仅适用于具有该ID的第一个元素，即#removeId

您需要使用类而不是ID -

<a href="#" class="helpTip1 removeId">
     <span  class="help_txt1 helptext1">
      <span class="help_txt1 helptxtContent"  >
         help text goes here 
      </span>
     </span>
</a>

jQuery -

var hide = false;
$(document).ready(function () {
    $(".removeId").click(function () {
        if (hide == true) {
            $(".helptxt1",this).fadeIn('slow');
            $(".helptxtContent",this).fadeIn(function () {
                hide = false;
            });
        }
        if (hide == false) {
            $(".helptxt1",this).fadeOut('slow');
            $(".helptxtContent",this).fadeOut(function () {
                hide = true;
            });
        }
    });
});

演示----> http://jsfiddle.net/4jUmL/

Jquery问题为淡入淡出

2 个答案: