0

我有一个常见问题解答页面，我希望问题的答案从问题下方滑落。我还希望在单击问题之前出现一个加号，并在答案可见时出现一个减号。不幸的是，我的 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

4

2 回答 2

2

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

$('.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（例如 $(this)）放入其中，以便您可以在操作的每个步骤中使用它。

于 2013-03-10T16:19:22.727 回答
2

您当前的选择器$('li p a')在整个文档中搜索锚点，这些锚点是 li 的子项，而 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/

或者整个东西可以被链接起来（.plusand.minus将在单击后立即切换，而不是在显示/隐藏动画完成后切换）：

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

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

于 2013-03-10T16:21:55.227 回答