Question

我在两个不同的表中使用了“toggle”类。我有一些jQuery代码可以来回切换跨越文本并且效果很好，但是我正在努力解决的问题是，如果单击一个，如何同时切换两个跨度，以便它们的文本相互匹配。

我尝试使用span[class='toggle']作为onclick对象，希望能够同时选择它们并运行代码，但这不起作用

$("span[class='toggle']").on("click", function() {
    var oldText = $(this).text();
    var newText = $(this).data('text');
    $(this).text(newText).data('text', oldText);
});

Here's a fiddle to demo:

Answer 1

假设我理解了您，并且您希望两者都切换到相同的值

替换：的 $（本）的.text（newText）。数据（ '文本'，oldText）;

使用：

<强> $（ “跨度[类= '切换']”）文本（newText）。数据（ '文本'，oldText）;

这会在点击其中任何一个时将两个跨度更新为新文本。

Answer 2

您可以在点击回调函数中添加each()循环，这样无论点击什么输入，您都可以为每个输入执行代码。请注意，$(this)的上下文是循环中的当前元素，而不是单击元素Fiddle

$("span[class='toggle']").on("click", function() {
  $("span[class='toggle']").each(function() {
    var oldText = $(this).text();
    var newText = $(this).data('text');
    $(this).text(newText).data('text', oldText);
  })
});

Answer 3

易。

您只需将$(this)替换为$("span[class='toggle']")。

当您使用“点击”功能时。你调用$（this）这是点击的元素。这就是为什么你的文字只在一个 span 中改变的原因。

<强> JS

$("span[class='toggle']").on("click",function () {
    var oldText = $(this).text();
    var newText = $(this).data('text');
    $("span[class='toggle']").text(newText).data('text',oldText);
});

这是一个jsFiddle。

Answer 4

这是一个很少修改的工作。 $(this).text(newText).data('text', oldText);在此this中使用click引用当前span $("span[class='toggle']").on("click",function () { oldTxt = $(this).text(); newTxt = $(this).data('text'); console.log(oldTxt+" "+newTxt); $("span[class='toggle']").text(newTxt).data('text', oldTxt); });课程文字。

＆＃13;

span {
    color: #18c;
    cursor: pointer;
}
span:hover {
    text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table1">
<span class="toggle" data-text="Analysis View">Reports View</span>
</div>
<div id="table2">
<span class="toggle" data-text="Analysis View">Reports View</span>
</div>

＆＃13;

https://cognito-idp.{region}.amazonaws.com/{userPoolId}/.well-known/jwks.json

＆＃13;

切换文本以匹配多个跨度

4 个答案: