Question

我想在标题类中添加一个类（hide）。但是我只需要将它添加到包含button.not到每个标题类的元素。我已经编写了一些JavaScript但它会为每个类添加hide类代码中的头类。如何仅添加到选定的一个？
我可以用这个来做。

$('.button').click(function () {
    $(this).closest('.container_outer').find('.Header').addClass('Hide');}

但我需要用一个函数来做。这可能吗？

＆＃13;

function addAclass(){
	$('.button').closest('.container_outer').find('.Header').addClass('Hide');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-context">
    <div class="container_outer">
        <div class="container_txt">
            <h4 class="Header" contenteditable="true">section 1</h4>
            <a href="#" class="containersave" >
        </div>
        <div class="container_icon"> <a class="button" onclick="addAclass()" href="#">button</a> </div>
    </div>
    <div class="container_outer">
        <div class="container_txt">
            <h4 class="Header" contenteditable="true">section 2</h4>
            <a href="#" class="containersave" >
        </div>
        <div class="container_icon"> <a class="button" onclick="addAclass()" href="#">button</a> </div>
    </div>    
    <div class="container_outer">
        <div class="container_txt">
            <h4 class="Header" contenteditable="true">section 3</h4>
            <a href="#" class="containersave" >
        </div>
        <div class="container_icon"> <a class="button" onclick="addAclass()" href="#">button</a> </div>
    </div>
</div>

＆＃13;

Answer 1

你需要对你的功能提出异议。做这样的事情

＆＃13;

function addAclass(obj){
	$(obj).closest('.container_outer').find('.Header').addClass('Hide');

}

＆＃13;

.Hide{
  background-color:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-context">
    <div class="container_outer">
        <div class="container_txt">
            <h4 class="Header" contenteditable="true">section 1</h4>
            <a href="#" class="containersave" >
        </div>
        <div class="container_icon"> <a class="button" onclick="addAclass(this)" href="#">button</a> </div>
    </div>
    <div class="container_outer">
        <div class="container_txt">
            <h4 class="Header" contenteditable="true">section 2</h4>
            <a href="#" class="containersave" >
        </div>
        <div class="container_icon"> <a class="button" onclick="addAclass(this)" href="#">button</a> </div>
    </div>    
    <div class="container_outer">
        <div class="container_txt">
            <h4 class="Header" contenteditable="true">section 3</h4>
            <a href="#" class="containersave" >
        </div>
        <div class="container_icon"> <a class="button" onclick="addAclass(this)" href="#">button</a> </div>
    </div>
</div>

＆＃13;

Answer 2

在您的代码中，

$('.button').click(function() {
  function addAclass() {
    $(this).closest('.container_outer').find('.Header').addClass('Hide');
  }
}

以下是问题：

addAclass是一个本地函数，无法在HTML上访问。
当您添加处理程序时，您不会将任何参数传递给您可以使用的处理程序。

以下几种方法可以解决它：

您可以将元素的引用传递给handler作为参数。

＆＃13;

function addAclass(el) {
  $(el).closest('.container_outer').find('.Header').addClass('Hide');
}

＆＃13;

.Hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-context">
  <div class="container_outer">
    <div class="container_txt">
      <h4 class="Header" contenteditable="true">section 1</h4>
      <a href="#" class="containersave">
    </div>
    <div class="container_icon"> <a class="button" onclick="addAclass(this)" href="#">button</a> </div>
  </div>
  <div class="container_outer">
    <div class="container_txt">
      <h4 class="Header" contenteditable="true">section 2</h4>
      <a href="#" class="containersave">
    </div>
    <div class="container_icon"> <a class="button" onclick="addAclass(this)" href="#">button</a> </div>
  </div>
  <div class="container_outer">
    <div class="container_txt">
      <h4 class="Header" contenteditable="true">section 3</h4>
      <a href="#" class="containersave">
    </div>
    <div class="container_icon"> <a class="button" onclick="addAclass(this)" href="#">button</a> </div>
  </div>
</div>

＆＃13;

您可以使用jQuery在JS中创建处理程序。它会自动绑定上下文：

此代码出现问题：

$('.button').closest('.container_outer').find('.Header').addClass('Hide');

就是这样，你的选择器不正确。 $('.button')将选择每个按钮。

＆＃13;

$('.button').on('click', function addAclass(el) {
  $(this).closest('.container_outer').find('.Header').addClass('Hide');
})

＆＃13;

.Hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-context">
  <div class="container_outer">
    <div class="container_txt">
      <h4 class="Header" contenteditable="true">section 1</h4>
      <a href="#" class="containersave">
    </div>
    <div class="container_icon"> <a class="button" href="#">button</a> </div>
  </div>
  <div class="container_outer">
    <div class="container_txt">
      <h4 class="Header" contenteditable="true">section 2</h4>
      <a href="#" class="containersave">
    </div>
    <div class="container_icon"> <a class="button" href="#">button</a> </div>
  </div>
  <div class="container_outer">
    <div class="container_txt">
      <h4 class="Header" contenteditable="true">section 3</h4>
      <a href="#" class="containersave">
    </div>
    <div class="container_icon"> <a class="button" href="#">button</a> </div>
  </div>
</div>

＆＃13;

Answer 3

在此处更改：

function addAclass(button){
    $(button).closest('.container_outer').find('.Header').addClass('Hide');
}

<a class="button" onclick="addAclass(this)" href="#">button</a>

jquery在同一个div中为选定元素添加一个类

3 个答案: