Javascript jQuery:if（dd）.class=active-then（dd-span）.text=example-text

我不知道该怎么做，但要扩展标题，我有以下代码：

<dl class="accordion">
    <dd>
        <a href="#panel1">March, 2014 <span>click to open</span>
        </a>
        <div id="panel1" class="content active">CONTENT HERE</div>
    </dd>
    <dd>
        <a href="#panel1">March, 2014 <span>click to open</span>
        </a>
        <div id="panel1" class="content">CONTENT HERE</div>
    </dd>
</dl>

我需要它说得更像这样：

if ($('dd').hasClass('active')){
  $('dd').find("span").text('click to close'); 
}else{
  $('dd').find("span").text('click to open'); 
}

这段代码是否可以压缩？我如何初始化它

谢谢=）

---

问题由@ArunPJohny回答！虽然耳朵是开放的最佳做法和格式技巧，所以扔我的方式请，我希望这将有助于别人

<script>
    $(function ($) {
        $('dl.accordion').find('dd:first span.click').text('click to close');
        $('dl.accordion').on("click", "dd", function (event) {
            setTimeout(function () {
                $('dl.accordion dd.active span.click').text('click to close');
                $('dl.accordion dd:not(.active) span.click').text('click to open');
            }, 50);
        })
    });
</script>

$（函数（$）{
$（'dl.accordion'）。查找（'dd:first span.click'）。文本（'click to close'）；
$（'dl.accordion'）。在（“单击”，“添加”，函数（事件）{
setTimeout（函数（）{
$（'dl.accordion dd.active span.click'）。文本（'click to close'）；
$（'dl.accordion dd:not（.active）span.click'）.text（'click to open'）；
}, 50);
})
});

您需要分别针对每个dd，如

$('dd span').text(function () {
    return $(this).closest('dd').hasClass('active') ? 'click to close' : 'click to open';
})

演示：

在您的情况下，如果任何

dd

中的类

处于活动状态

，则您正在更改所有

span

元素值的文本

---

另一种方法是

$('dd.active span').text('click to close');
$('dd:not(.active) span').text('click to open');

---

演示：

您需要分别针对每个dd，如

$('dd span').text(function () {
    return $(this).closest('dd').hasClass('active') ? 'click to close' : 'click to open';
})

演示：

在您的情况下，如果任何

dd

中的类

处于活动状态

，则您正在更改所有

span

元素值的文本

---

另一种方法是

$('dd.active span').text('click to close');
$('dd:not(.active) span').text('click to open');

---

演示：

谢谢。活动值仅适用于“打开”的元素，背景中已经有一些JS。但是这个代码在任何方面都要小得多@MattRoberts 33如果活动类只针对一个项目，那么我认为正如你所建议的那样。。将默认文本设置为“单击打开”，然后使用单行脚本

$（“dd.active span'）。文本（“单击关闭”）只需将其添加到脚本标记中。。。可能是在一个dom就绪的环境中handler@mattroberts33尝试
$（函数（$）{$（.accordion”）。在（“单击”，“dd”，函数（事件）{setTimeout（函数（{$（'dl.accordion dd.active span'）。text（'click to close'）；$（'dl.accordion dd:not（.active）span'）。text（'click to open'）；}，50）；}）
@mattroberts33 Try
$（函数（$）{$（“.accordion”）。在（“单击”，“dd”，函数（事件）{$（'dl.accordion'）。查找（'dd:first span'）。文本（'click to close'）；设置超时（函数（）{$（'dl.accordion dd.active span'）。文本（'click to close'）；$（'dl.accordion dd:not（.active span'）。文本（'click to open'））;         }, 50);     }) });谢谢，那么.active值将只应用于“打开”的元素，在后台已经有一些JS。但是这个代码在任何方面都要小得多@MattRoberts 33如果活动类只针对一个项目，那么我认为正如你所建议的那样。。将默认文本设置为“单击打开”
，然后使用单行脚本
$（“dd.active span'）。文本（“单击关闭”）只需将其添加到脚本标记中。。。可能是在一个dom就绪的环境中handler@mattroberts33尝试
$（函数（$）{$（.accordion”）。在（“单击”，“dd”，函数（事件）{setTimeout（函数（{$（'dl.accordion dd.active span'）。text（'click to close'）；$（'dl.accordion dd:not（.active）span'）。text（'click to open'）；}，50）；}）
@mattroberts33 Try
$（函数（$）{$（“.accordion”）。在（“单击”，“dd”，函数（事件）{$（'dl.accordion'）。查找（'dd:first span'）。文本（'click to close'）；设置超时（函数（）{$（'dl.accordion dd.active span'）。文本（'click to close'）；$（'dl.accordion dd:not（.active span'）。文本（'click to open'））;         }, 50);     }) });