Question

我有一个常见问题解答页面，我希望问题的答案从问题的下方向下滑动。我还希望在单击问题之前显示加号，并在答案可见时显示减号。不幸的是，我的jquery代码更改了所有问题的加号/减号，而不仅仅是单击的问题。这是我的代码：

$('.trigger').click(function() {
   $(this).children('.hidden').toggle('slow', function() {
       if ($(this).is(':visible')) {
            $('li p a').children('.plus').hide();
            $('li p a').children('.minus').show();
        } else {
            $('li p a').children('.plus').show();
            $('li p a').children('.minus').hide();
        }
   });
    return false;
 });

和一个jsfiddle示例：

jsfiddle

Answer 1

你应该确定女巫“减”和“加”是孩子的。

$('.trigger').click(function() {
    var tis = $(this);
    tis.children('.hidden').toggle('slow', function() {
       if ($(this).is(':visible')) { // $(this) in "this" case is refer to the children!
            tis.find('.plus').hide();
            tis.find('.minus').show();
        } else {
            tis.find('.plus').show();
            tis.find('.minus').hide();
        }
   });
    return false;
 });

我知道这段代码需要更清晰，但它的工作原理知道:-) 如果您要在JQuery操作中使用很多东西，我总是鼓励缓存DOM对象。一个非常基本的缓存是创建一个临时变量并将所有DOM（ex $（this））放入其中，以便您可以在操作的每个步骤中使用它。

Answer 2

您当前的选择器$('li p a')会在整个文档中搜索作为段落子项的li子项的锚点。您需要确保仅在.trigger元素内进行搜索。

请参阅http://api.jquery.com/find/

$('.trigger').click(function() {
   var trigger = $(this); // Store the clicked object in a variable and convert to jQuery object
   trigger.children('.hidden').toggle('slow', function() {
       if ($(this).is(':visible')) {
            trigger.find('.plus').hide(); // trigger.find() allows us to search using our CSS selector only within the trigger object.
            trigger.find('.minus').show();
        } else {
            trigger.find('.plus').show();
            trigger.find('.minus').hide();
        }
   });
    return false;
 });

http://jsfiddle.net/NYZa3/1/

也可以这样写：

$('.trigger').click(function() {
   var trigger = $(this); // Store the clicked object in a variable and convert to jQuery object
   trigger.children('.hidden').toggle('slow', function() {
       trigger.find('.plus, .minus').toggle();
   });
   return false;
 });

http://jsfiddle.net/NYZa3/4/

或者整个事情都可以链接（.plus和.minus会在点击后立即切换，而不是在显示/隐藏动画完成后切换：

$('.trigger').click(function() {
   $(this)
   .children('.hidden')
   .toggle('slow')
   .siblings('p')
   .find('.plus, .minus')
   .toggle();
    return false;
});

http://jsfiddle.net/NYZa3/5/

Jquery代码产生不良结果

2 个答案: