Question

这是我的HTML代码：

<th>
    Click<br/>
    <img class="magnifier" height="66" src="../Images/magnifier-zoom.png" width="75"><br/>
    To Enlarge
</th>

我有一个jQuery脚本，点击它时会切换enlarge类，所以当有人点击放大时我想将enlarge 字更改为{{1}在jQuery中有没有简单的方法呢？

或者你们认为我最好拥有2个shrink甚至<div>元素并切换每个元素的显示？

Answer 1

有很多方法可以做到这一点。您可以利用伪元素内容，使用JavaScript进行字符串操作等。最后，最好的方法是切换几个嵌套元素的可见性：

我已经设置了默认＆＃34;收缩＆＃34;我的td元素上的类。在内部，我有几个span元素，用明确的data-do属性定制，表明每个元素的目的：

<td class="shrink"> 
    Click to 
    <span data-do="enlarge">Enlarge</span>
    <span data-do="shrink">Shrink</span>
    <img src="..." />
</td>

我们定位嵌套在具有相应类的元素中的data-do属性，并禁用这些元素的显示：

.shrink  [data-do='shrink'],
.enlarge [data-do='enlarge'] { 
    display: none;
}

为了切换td元素的类，我们绑定了一些简单的jQuery：

$("td").on("click", function () {
   $(this).toggleClass("shrink enlarge"); 
});

只要点击td（您可以将选择器设为特定的td），我们就会添加切换＆＃34;收缩＆＃34;和＆＃34;放大＆＃34;类。如果＆＃34;放大＆＃34;一开始就存在，它被删除;否则会被添加。同样适用于＆＃34;收缩＆＃34;。

Answer 2

将您的HTML更改为

<th>
    <div>Click</div>
    <img class="magnifier" height="66" src="../Images/magnifier-zoom.png" width="75">
    <div>To Enlarge</div>
</th>

要使用元素而不是文本节点。

然后你可以做到简单：

$('.magnifier').click(function() {

    var $next = $(this).next();

    $next.text($next.text() == 'To Enlarge' ? 'To Shrink' : 'To Enlarge');

})

演示：http://jsfiddle.net/B7GDQ/

Answer 3

这是您问题的直接答案，尽管不是最好的方法：

$(".magnifier").on("click", function () {
  if ($(this).hasClass('enlarge')) {
    $(this).removeClass('enlarge');
    this.parentNode.lastChild.textContent = 'To Enlarge'
  }else{
    $(this).addClass('enlarge');
    this.parentNode.lastChild.textContent = 'To Shrink';
  }
});

理想的方法是使用伪元素：

Codepen

HTML：

<div class="magnifier">
  Click<br/>
  <img height="66" src="../Images/magnifier-zoom.png" width="75"><br/>
</div>

CSS：

.magnifier::after {
  content: 'To Enlarge';
}
.magnifier.enlarge::after {
  content: 'To Shrink';
}

JS：

$(".magnifier").on("click", function () {
  $(this).toggleClass('enlarge');
});

如何使用jQuery更改特定的HTML字符串

3 个答案: