Question

我有2个.tablerow具有相同的按钮类：

<div class="tablerow>
     <div><button class="clickhere">Button 1</button><div>
     <div><span></span><div>
</div>
<div class="tablerow>
     <div><button class="clickhere">Button 2</button><div>
     <div><span></span><div>
</div>

每当我点击.clickhere按钮时，我想根据之前点击的按钮显示一些动态变化的文字。

例如：假设我单击按钮2 ，然后我想在同一<span></span>的{{1}}内显示一些文本，这些文本不应显示在第一行。

.tablerow

我的问题是，如何确定点击了哪个按钮并更改了点击按钮旁边的范围文字？

Answer 1

看看这个

$(".clickhere").click(function() {
    $(this).parents(".tablerow").find("span").text("whatever");
});

您选择所点击对象的父.tablerow，并更改其中的范围文本

此外，您的html结构和语法略有不正确，必须是

<div class="tablerow">
     <div><button class="clickhere">Button 1</button></div>
     <div><span></span></div>
</div>
<div class="tablerow">
     <div><button class="clickhere">Button 2</button><div>
     <div><span></span></div>
</div>

Answer 2

$(this).parent().next('div').find('span').text('super cool text');

Answer 3

首先 - 你需要修复你的tablerow div中的结束div标签：

<div class="tablerow>
    <div><button class="clickhere">Button 1</button></div>
    <div><span></span></div>
</div>
<div class="tablerow>
    <div><button class="clickhere">Button 2</button></div>
    <div><span></span></div>
</div>

第二 - 对于javascript你可以尝试：

$(".clickhere").click(function(){
    $(this).siblings('div span').empty().append("New text");
});

这将删除之前在范围内的内容 - 并附加新文本。

如何更改下一个div的文本

3 个答案: