Question

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

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

我不确定如何重写或修改此代码以正确显示单击的元素，文本始终。

这是一个jsfiddle示例：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);
};
});

Answer 1

您正在绑定以下点击处理程序

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

在<a>内部点击处理程序，因此无论何时点击链接，都会添加多个处理程序。

您可以使用toggleClass()方法避免许多不必要的代码。

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

毕竟你的代码归结为

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

和客户slideFadeToggle功能。

Updated Fiddle

Jquery之前的.html（）元素仍然显示何时单击新元素

1 个答案: