个人中心
gpt4 book ai didi

javascript - 复杂的网站，需要更新与 jQuery 共享类的按钮

转载 作者：太空宇宙 更新时间：2023-11-04 02:33:32 25 4
gpt4 key购买 nike

我正在为一个相当复杂的网站构建测试。在这个测试中，我应该针对一组特定的按钮，问题是这些按钮与我应该排除的按钮共享相同的类。这必须在 jQuery 中完成，我无权访问源代码来添加新类。

我剩下的一个希望是将下面的 jQuery 排除在某些父 div 类之外，这样子 <a>链接没有应用以下样式。

$('a.button.secondary').css({"background-color": "#ffffff", "color": "#000000","border-color": "#838E93", "border-width": "2px", "border-style": "solid", "margin": "2px"});

$('a.button.secondary').mouseenter(function() {
$(this).css("border-width", "4px").css("margin", "0");
}).mouseleave(function() {
$(this).css("border-width", "2px").css("margin", "2px");
});

这是我能提供的最好的 HTML 示例。我希望脚本应用于任何没有 molecule-301 父 div 的按钮。

<body>
<div class="molecule-301">
<h2>
<a class="button secondary" href="...">don't touch</a>
</h2>
</div>
<div class="everything-else">
<a class="button secondary" href="...">change me</a>
</div>
</body>

下面建议尝试这样的事情......

$('a.button.secondary').mouseenter(function() {
var test = false;
if ($(this).parents().hasClass('.molecule-301')) test = true;
if (test) $(this).css("border-width", "4px").css("margin", "0");
}).mouseleave(function() {
var test = false;
if ($(this).parents().hasClass('.molecule-301')) test = true;
if (test) $(this).css("border-width", "2px").css("margin", "2px");
});

到目前为止，虽然我还没有能够让这最后一点正常工作。

最佳答案

鉴于问题中的 HTML，我建议使用一个简单的选择器，然后使用 filter() 方法:

// select all <a> elements with the classes of 'button'
// and 'secondary'; then use filter() to retain only
// those elements you wish to keep:
$('a.button.secondary').filter(function() {
  // the filter() method retains only those elements for
  // which the assessment returns true (or truthy):

  // here we find the closest ancestor element of the
  // current element in the collection that matches the
  // given selector; if the length of that collection
  // is equal to 0, (there are no ancestors matching the
  // selector) we retain that element:
  return $(this).closest('.molecule-301').length === 0;

// and apply the following method to those retained
// elements:
}).css({
  "background-color": "#ffffff",
  "color": "#000000",
  "border-color": "#838E93",
  "border-width": "2px",
  "border-style": "solid",
  "margin": "2px"
});

$('.button.secondary').filter(function() {
  return $(this).closest('.molecule-301').length === 0;
}).css({
  "background-color": "#ffffff",
  "color": "#000000",
  "border-color": "#838E93",
  "border-width": "2px",
  "border-style": "solid",
  "margin": "2px"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="molecule-301">
  <h2>
<a class="button secondary" href="...">don't touch</a>
</h2>
</div>
<div class="everything-else">
  <a class="button secondary" href="...">change me</a>
</div>

或者，在纯 JavaScript 中——尽管是在 ES6/ECMAScript 2015 JavaScript 中——你可以使用以下内容:

// converting the collection of elements from the collection
// returned by document.querySelectorAll() into an
// Array, using Array.from(); which allows us to use Array
// methods:
Array.from(document.querySelectorAll('a.button.secondary'))

  // here we use Array.prototype.filter() to retain only those
  // elements for which the assessment within the anonymous
  // function returns true/truthy values:
  .filter(function(el) {
    // 'el' is a reference to the current element of the
    // Array over which we're iterating (the name is user
    // defined).

    // here we retain only those elements that have no
    // ancestor Node matching the supplied selector:
    return !el.closest('.molecule-301');

  // we iterate over the retained elements:
  }).forEach(function(el) {

    // and use the Element.classList API to add
    // a new class-name to the current list of
    // class-names that the Element has (here we
    // add the 'buttonStyle' class-name).
    // This is somewhat easier than updating 
    // multiple CSS properties programatically:
    el.classList.add('buttonStyle');
  });

Array.from(document.querySelectorAll('a.button.secondary'))
  .filter(function(el) {
    return !el.closest('.molecule-301');
  }).forEach(function(el) {
    el.classList.add('buttonStyle');
  });
.buttonStyle {
  background-color: #ffffff;
  color: #000000;
  border-color: #/838E93;
  border-width: 2px;
  border-style: solid;
  margin: 2px;
}
<div class="molecule-301">
  <h2>
<a class="button secondary" href="...">don't touch</a>
</h2>
</div>
<div class="everything-else">
  <a class="button secondary" href="...">change me</a>
</div>

引用资料:

关于javascript - 复杂的网站，需要更新与 jQuery 共享类的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36096608/

25 4 0
文章推荐： c - 使用 fgets() 从 stdin 读取
文章推荐： javascript - 使用 require 从并行 Mean.js 项目加载模型文件时出现 Mongoose 错误
文章推荐： C 的代码覆盖率
文章推荐： python - Keras 自定义损失计算不正确
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com