如何在jQuery上设置点击优先级？

hjqgdpho 于 2023-03-22 发布在 jQuery

关注(0)|答案(2)|浏览(205)

我的HTML模板中有一些按钮，它们使用了一些jquery的实现。代码如下：

// template
$('.myClass').click(()=>{
  $('#myTarget').css('background-color','green');
});

// my work
$('#myId').click(()=>{
  $('#myTarget').css('border','5px solid red');
});

#myTarget {
  background-color: blue;
  width: 100px;
  height: 100px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myTarget">Test</div>
<br />
<button id="myId" class="myClass">Change</button>

正如你所看到的，目标div会在它的边框和背景色上做一些改变，问题不是关于如何改变CSS属性的值，而是我想让jquery（我的作品）只执行自己创建的函数而不移除button元素的类或者移除jquery模板，所以当它点击的时候只有div的边框改变了。我怎么能让jquery优先级像这样呢？
谢谢。

jquery

来源：https://stackoverflow.com/questions/75808485/how-to-make-priority-on-jquery-click

2条答案

按热度按时间

u1ehiz5o1#

您可以使用.off()删除当前附加到按钮的其他单击事件侦听器。

$('#myId').off('click').click(()=>{
  $('#myTarget').css('border','5px solid red');
});

赞(0）回复(0）举报 2023-03-22

5uzkadbs2#

您可以使用not()，它只适用于匹配的元素。
下面是一个演示，只有当被点击的元素有.myClass但没有#myId时，背景才会改变，只有当被点击的元素有#myId时，边框才会改变。

let randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);

// Will only work with the elements which has .myClass but not #myId
$('.myClass').not('#myId').click(() => {
  $('#myTarget').css('background-color', randomColor())
});

// Will only work with the elements which has #myId
$('#myId').click((e) => {
  $('#myTarget').css('border', '5px solid ' + randomColor());
});

#myTarget {
  background-color: blue;
  width: 100px;
  height: 100px;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div id="myTarget">Test</div><br><br>
  <!-- Element with both, id and class -->
  <button class="myClass" id="myId" >Change Border</button>
  <!-- Element with only class -->
  <button class="myClass">Change Background</button>
</div>

赞(0）回复(0）举报 2023-03-22

我来回答

如何在jQuery上设置点击优先级？

2条答案

相关问题

热门标签

最新问答