jQuery 切换 - 更改图像的背景位置答案

【问题标题】：jQuery toggle - change background position of imagejQuery 切换 - 更改图像的背景位置
【发布时间】：2014-11-15 03:11:01
【问题描述】：

我有一个工作正常的 jQuery 切换功能：如果我单击 dt-tag，dd 部分会向上或向下滑动。就像它应该做的那样。但现在我想扩展切换功能：每次单击 dt-tag 时，dt-tag 中 span 元素的背景图像都会改变位置（显示向上或向下箭头）。我试图用下面的代码来完成它，但我无法让它工作

         <dt><?php echo $this->__($_filter->getName()) ?><span id="cpl"></span></dt>
         <dd><?php echo $_filter->getHtml() ?></dd>


        jQuery('dd').hide();
        jQuery('dt').click(function() {
            var toggle = jQuery(this).nextUntil('dt');
            toggle.slideToggle();
            jQuery('dd').not(toggle).slideUp();
            jQuery('#cpl').toggleClass('clicked');
        });

       #cpl {
         width: 90px;
         height: 11px;
         display: inline-block;
         margin: 0 0 0 10px;
         background:transparent url('../images/arrow.gif') no-repeat;
         background-position: 0 0;
       }

       #cpl.clicked {
         background-position: 0 -15px;
       }

非常感谢任何帮助。谢谢。

【问题讨论】：

您的代码按预期工作：jsfiddle.net/8xqsx44b
请描述“我无法让它工作”是什么意思。屏幕上发生了什么？背景根本没有出现吗？单击时背景不会改变位置吗？控制台中是否有错误消息？
感谢您对此进行调查。我现在看到了这个问题：问题是我在这个页面上有多个 dt 和 dd 元素，所以 span id (#cpl) 不再是唯一的。这就是为什么它对我不起作用。我试图通过使用 find('span') 或 toggle.children('span') 来解决这个问题，但它对我不起作用。有什么想法可以在不使用 #id 的情况下解决 dt 元素中的跨度问题吗？谢谢！
“不适合我”意味着图像没有切换，因为“点击”类不会“应用”到 span 元素。谢谢
试试：jQuery('span', this).toggleClass('clicked');instead。并且： ID 必须是唯一的。在 CSS 中使用 class="cpl" 和 .cpl / .cpl.clicked。

标签： javascript jquery toggle

【解决方案1】：

三个步骤：1）为您的跨度提供一个通用类而不是一个 ID：

<span class="cpl"></span>

2) 将点击功能中的最后一行更改为：

jQuery('dt').click(function() {
    /* your code */
    // this selects only an element with class 'cpl' inside the clicked element
    jQuery('.cpl', this).toggleClass('clicked');
});

3) 更改您的 CSS 以解决“cpl”类：

.cpl { ... }
.cpl.clicked { ... }

DEMO with three 'dt'.

【讨论】：