javascript - 只选择一个元素的子元素，由他的类标识

Question

如何只在我点击的元素的子元素(由他的类标识)上激活点击事件？

我尝试了这个，但似乎激活了页面上 .a-collaps-button 的所有 onclick 事件(我有多个 .collaps-button 和多个 .a-collaps-button)

<button class="collaps-button">
  <a href="#adminModal" class="a-collaps-button" data-toggle="modal" onclick="showModalContentjs('modificy')">Modificy</a>
</button>

$('.collaps-button').click(function () {
  $(this).children('.a-collaps-button').click();
});

对于 CSS，我这样做并且有效

$(function () {
  $('.collaps-button').hover(function () {
    $(this).children('.a-collaps-button').css('color', '#f44242');
    $(this).children('.a-collaps-button').css('text-decoration', 'none');
  }, function () {
    $(this).children('.a-collaps-button').css('color', 'white');
    $(this).children('.a-collaps-button').css('text-decoration', 'none');
  });
});

Answer 1

您的主要问题是您的 HTML 无效。您不能嵌套可点击元素，即。您不能将 a 元素放在 button 中。

要解决此问题，请删除 a 元素，并将您在单击该 a 时执行的任何逻辑简单地附加到 按钮的单击事件 相反。另请注意，您不应使用过时的 on* 事件属性。使用不显眼的事件处理程序，例如 addEventListener() 或 jQuery 的 on() 或事件快捷方式方法，例如 click()。

另请注意，您不应使用 JS 来修改 UI。您的 hover 逻辑更适合 CSS。试试这个:

$('.collaps-button').click(function() {
  showModalContentjs('modificy');
});

function showModalContentjs(foo) {
  console.log(foo);
}

.collaps-button {
  color: white;
  text-decoration: none
}
.collaps-button:hover {
  color: #f44242;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="collaps-button">Modificy</button>