Question

我有一个网页，使用简单的查询根据数据库中的类别生成相同的DIV。所以在这种情况下有两个类别。每个DIV都有一个按钮，单击该按钮时应更改当前DIV标题文本的文本。

<body>

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
    <div class="title">
        <div class="titleText">Category 1</div>
        <button id="btn">id="btn" Click Me</button>
    </div>
</div>

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
    <div class="title">
        <div class="titleText">Category 2</div>
        <button id="btn">id="btn" Click Me</button>
    </div>
</div>


<script>

    dp("#btn").click(function(){
        dp(".titleText").html("This is the new TITLE Text");
    });

</script>

</body>

我的问题是，在类别1中，例如，如果我单击该按钮，那么它将更改两个titleText的html，它应该只更改类别1中titleText的html。

我尝试过使用增量ID和所有种类，这绝对不是答案。那么如何仅在Button的当前DOMParent div中更改titleText？

编写此示例代码只是为了简化我的问题，以便代码更小。我遗漏了mysql查询并进行了排序，因为最终这就是生成的内容。

Answer 1

由于'ID必须是唯一的'，您可以像这样class提供一个button：

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
<div class="title">
    <div class="titleText">Category 1</div>
    <button class="btn">id="btn" Click Me</button>
</div>
</div>
<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
<div class="title">
    <div class="titleText">Category 2</div>
    <button class="btn">id="btn" Click Me</button>
</div>

然后在JS中使用prev使用div获取之前的class titleText：

dp(".btn").click(function(){ 
    dp(this).prev(".titleText").html("This is the new TITLE Text");
});

.prev()方法在DOM树中搜索每个元素的前任，并从匹配元素构造一个新的jQuery对象。

该方法可选地接受可以传递给$()函数的相同类型的选择器表达式。如果提供了选择器，则将通过测试它是否与选择器匹配来过滤前面的元素。

以下是同一

的Demo

Answer 2

id属性是唯一值，因此您需要将按钮ID属性更改为类。

<button class="btn"> Click Me</button>

现在您想要访问父级，因此您应该使用jQuery的 parent() 方法。然后你需要用find方法找到孩子.titleText。

所以你可以编写这样的代码，并查看下面的例子小提琴

$(this).parent().find(".titleText").text("This is the new TITLE Text");

<强> Example

Answer 3

你必须使用类而不是id的按钮，并找到它的兄弟。

<body>

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000; margin: 10px; padding:10px;">
<div class="title">
    <div class="titleText">Category 1</div>
    <button class="btn">id="btn" Click Me</button>
</div>
</div>

<div class="DOMParent" style="width: 100%; border: 1px solid #ff0000;  margin: 10px; padding:10px;">
<div class="title">
    <div class="titleText">Category 2</div>
    <button class="btn">id="btn" Click Me</button>
</div>
</div>


<script>

$("#btn").click(function() {
  $(this).siblings(".titleText").html("This is the new TITLE Text");
});

</script>

</body>

在jQuery

3 个答案: