javascript - 单击按钮替换单个单词

Question

我页面上的按钮数量是动态创建的，因此向其中的许多按钮添加 ID 属性并不理想。我当然也不想添加一个类，因为附加相同的类(按钮在 PHP 循环中生成)会影响它们。

这就是我的意思。

所有按钮中都有单词 View。

<button><span>View</span><br />One</button>
<button><span>View</span><br />Two</button>
<button><span>View</span><br />Three</button>

使用这个 jQuery 函数，我可以更改单个单词(而不是像我之前失败的实验所显示的那样更改整个按钮文本)。

$("button").click(function() {
     $("button span").html($("button span").html() == 'View' ? 'Hide' : 'View');
});

但此脚本正在更改所有带有单词 View 的按钮的值。

我如何修改它(或使用不同的方法)以仅针对单击的按钮而不是所有按钮(如我所说，最好不添加 ID 属性)。

JSFiddle:https://jsfiddle.net/jpb1a674/1/

Answer 1

使用这个。在事件内部，它指的是引发事件的元素。

$("button").click(function() {
  var span = $(this).children().first();
  span.html(span.html() == 'View' ? 'Hide' : 'View');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button><span>View</span><br />One</button>
<button><span>View</span><br />Two</button>
<button><span>View</span><br />Three</button>