以前的.html（）元素仍然会显示何时点击新元素

问题描述

我必须编写代码来查找所有锚点并附加一个显示元素文本弹出框的函数。我的代码可能是一团糟，但我能够得到它的工作，但我现在的问题是：

如果我点击链接1，然后链接2，然后点击链接1再次，它显示链接2的文​​本，但是，如果我再次单击它显示正确的文本。

我不确定如何重写或去修复此代码正确显示被点击的元素，始终显示文本。

这是一个jsfiddle示例：

  $ （document）.ready（function（）{
 
 function deselect（e）{
 $（'。pop'）。slideFadeToggle（function（）{
 e.removeClass（ 'selected'）; 
}）; 
} 
 
 $（function（）{
 $（'a'）。click（function（）{
 if（$（this）.hasClass（'selected'））{
 deselect（$（this））; 
 
} else {
 $（this）.addClass （'selected'）; 
 $（'。pop'）。slideFadeToggle（）; 
 var e （< p> +< br>< br>+您刚刚点击了： >< b>< b> + elText +< / b>< br>< br>< br><>"点击任何地方关闭+< / p> 
 console.log（this）; 
 
 $（＃closeWin）。click（function（）{
 $（'。anchorpop'）。hide（）; 
}）; 
} 
返回false; 
}）; 
}）; 
 
 $（function close（）{
 $（document）.click（function（）{
'（'。anchorpop'）。hide（）; 
 }）; 
}）; 
 
 $ b $ .fn.slideFadeToggle = function（easing，callback）{
 return this.animate（{opacity：'toggle'，height：'toggle'}，'fast '，缓动，回调）; 
}; 
}）; 
  

解决方案

您绑定了以下点击处理程序

$ b $

  $（＃closeWin）。click（function（）{
 $（'。anchorpop'）。hide（） ; 
}）; 
  

里面< a> 点击处理程序您可以使用 toggleClass（）来避免许多不必要的代码。每当链接被点击时，都会添加多个处理程序。 方法。

您也可以通过传递额外的选择器将相同的事件处理程序绑定到多个元素。

毕竟你的代码归结为

  $（function（）{
 $（'a'）。click（function（） {
 var htmlString =< p>+< br>< br>+您只需点击：< br>< b>+ $（this）.text（）+ < / b>< br>< br>< br>+点击任意位置关闭+< / p>
 $（'。pop'）。html（htmlString） .slideFadeToggle（function（）{
 $（this）.toggleClass（'selected'）; 
}）; 
 return false; 
}）; 
 $（ #closeWin，.anchorpop）。click（function（）{
 $（'。anchorpop'）。hide（）; 
}）; 
}）; 
  

和custome slideFadeToggle 函数。 p>

I have to write code which finds all anchors and attaches a function that displays a popup of the elements text. My code is probably a mess, but I was able to get it working however the issue I have now is:

If I click link 1, then link 2, then click link 1 again, it displays link 2's text however if i click it again it displays the correct text.

I am not sure exactly how to rewrite or go about fixing this code to properly display the element which is clicked, text all the time.

here is a jsfiddle example: http://jsfiddle.net/2aLfL/1/

$(document).ready(function() {

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
});
}

$(function() {
   $('a').click(function(){
     if($(this).hasClass('selected')){
     deselect($(this));

} else {
  $(this).addClass('selected');
  $('.pop').slideFadeToggle();
    var elText = $(this).text();
    $('#elPop').html("<p>" + "<br><br>" + "You just clicked: <br><b>" + elText + "</b><br><br><br>" + "Click anywhere to Close" + "</p>");
    console.log(this);

    $("#closeWin").click(function () {
        $('.anchorpop').hide();
    });
}
return false;
});
});

    $(function close(){
 $(document).click(function(){
  $('.anchorpop').hide();
  });
});


$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
});

解决方案

You're binding the following click handler

    $("#closeWin").click(function () {
      $('.anchorpop').hide();
    });

inside <a> click handler so whenever a link is clicked, multiple handlers are being added.

You can avoid many unnecessary code using toggleClass() method.

You can also bind same event handlers to multiple elements by passing additional selectors.

after all your code boils down to

$(function () {
  $('a').click(function () {
    var htmlString = "<p>" + "<br><br>" + "You just clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "Click anywhere to Close" + "</p>"
    $('.pop').html(htmlString).slideFadeToggle(function () {
        $(this).toggleClass('selected');
    });
  return false;
  });
  $("#closeWin, .anchorpop").click(function () {
    $('.anchorpop').hide();
  });
});

and the custome slideFadeToggle function.

Updated Fiddle

这篇关于以前的.html（）元素仍然会显示何时点击新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！