基于父类的不同 jQuery 函数

问题描述 投票：0回答：1

我有一个开关，可以将父类更改为 div，并且基于该父类，该父类内的链接会执行不同的操作。我把它写得像 CSS 一样：D

// if the parent is .major, do this:
$(".major .menu a").click(function(e){
    $(".minor-result").removeClass("act");
    $(".major-result").addClass("act");
    e.preventDefault();
});
// if the parent is .minor, do this:
$(".minor .menu a").click(function(e){
    $(".major-result").removeClass("act");
    $(".minor-result").addClass("act");
    e.preventDefault();
});

此外，还将有七个不同的家长班。它不能是一个切换，我真的需要那些子元素的添加/删除规则。

我知道 jQuery 将该函数绑定到现有的父子组合，并且更改父类不会更改该函数。

编辑： 一种解决方案是在每个菜单 li 中放置 7 个唯一的链接，这些链接将根据父类使用 CSS 显示：block/none。如果每个链接只有一种功能，那就不再有问题了。但也许 jQuery 可以通过交换 7 个选项来简化它。

// swap classes for #scale 
$(".make-minor a").click(function(e){
    $("#scale").removeClass("major");
    $("#scale").addClass("minor");
    e.preventDefault();
});
$(".make-major a").click(function(e){
    $("#scale").removeClass("minor");
    $("#scale").addClass("major");
    e.preventDefault();
});
// here is the part I struggle with:
// if the parent is .major, do this:
$(".major .menu a").click(function(e){
    $(".minor-result").removeClass("act");
    $(".major-result").addClass("act");
    e.preventDefault();
});
// if the parent is .minor, do this:
$(".minor .menu a").click(function(e){
    $(".major-result").removeClass("act");
    $(".minor-result").addClass("act");
    e.preventDefault();
});
.page-body {margin:20px auto;width:200px;}
a {text-decoration:none;padding:5px 10px;display:inline-block;}

.make-minor a {background:blue;color:#fff;}
.make-major a {background:red;color:#fff;}

.major .menu a {color:orange;}
.minor .menu a {color:teal;}

.act {display:block !important;}
.major-result, .minor-result {display:none;}

.major-result a {color:red;}
.minor-result a {color:blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="page-body">
  
<div class="make-major"><a href="">make it Major</a></div>
<div class="make-minor"><a href="">make it minor</a></div>

<div id="scale" class="major"><!-- can be .minor -->
  <ul id="wrap" class="menu">
    <li id="one"><a href="">I</a></li>
    <li id="two"><a href="">ii</a></li>
    <li id="three"><a href="">III</a></li>
  </ul>
</div>

<ul class="major-result act">
  <li><a href="">One</a></li>
  <li><a href="">Two</a></li>
  <li><a href="">Three</a></li>
</ul>
<ul class="minor-result">
  <li><a href="">one minor</a></li>
  <li><a href="">two minor</a></li>
  <li><a href="">three minor</a></li>
</ul>
  
</div>

jquery parent-child
1个回答
0
投票

四个 

click
监听器可以替换为两个：

  1. 在父级的类列表中查找目标操作名称，然后删除先前的操作并将当前操作添加到 
    #scale
    元素类中。
  2. 从 
    result
    元素中删除 act 类，使用当前 
    .ACTION_NAME-result
    操作名称构建 
    #scale
    选择器，使用该选择器查找元素，最后向其添加 
    act
    类。

添加了通用 CSS 类 

make
和 
result
以简化脚本和样式。

添加了

五个 color 操作来演示七个不同的父类。所有类（包括 major、minor）都列在脚本开头的 

actions
变量中。

$(function() {
  // list of action names
  const actions = ["major", "minor", "green", "aqua", "gray", "fuchsia", "orange"];

  // swap classes for #scale 
  $(".make a").click(function(e) {
    const make = $(this).closest(".make");
    const makeActions = actions.filter(function(act) {
      return make.hasClass("make-" + act);
    });
    $("#scale").removeClass(actions);
    $("#scale").addClass(makeActions);
    e.preventDefault();
  });

  // find an action class and activate its result
  $("#scale .menu a").click(function(e) {
    const scale = $(this).closest("#scale");
    $(".result").removeClass("act");
    actions.forEach(function(act) {
      if (scale.hasClass(act)) {
        $("." + act + "-result").addClass("act");
      }
    });
    e.preventDefault();
  });
});
.page-body {
  margin: 20px auto;
  width: 200px;
}

a {
  text-decoration: none;
  padding: 5px 10px;
  display: inline-block;
}


/* Make links */

.make a {
  color: #fff;
}

.make-minor a {
  background: blue;
}

.make-major a {
  background: red;
}

.make-green a {
  background: green;
}

.make-aqua a {
  background: aqua;
}

.make-gray a {
  background: gray;
}

.make-fuchsia a {
  background: fuchsia;
}

.make-orange a {
  background: orange;
}


/* Results */

.result {
  display: none;
}

.result.act {
  display: block;
}


/* Menu and result colors */

.major .menu a,
.major-result a {
  color: red;
}

.minor .menu a,
.minor-result a {
  color: blue;
}

.green .menu a,
.green-result a {
  color: green;
}

.aqua .menu a,
.aqua-result a {
  color: aqua;
}

.gray .menu a,
.gray-result a {
  color: gray;
}

.fuchsia .menu a,
.fuchsia-result a {
  color: fuchsia;
}

.orange .menu a,
.orange-result a {
  color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<div class="page-body">

  <div class="make-major make"><a href="">make it Major</a></div>
  <div class="make-minor make"><a href="">make it minor</a></div>
  <div class="make-green make"><a href="">make it green</a></div>
  <div class="make-aqua make"><a href="">make it aqua</a></div>
  <div class="make-gray make"><a href="">make it gray</a></div>
  <div class="make-fuchsia make"><a href="">make it fuchsia</a></div>
  <div class="make-orange make"><a href="">make it orange</a></div>

  <div id="scale" class="major">
    <!-- can be .minor, .green, .aqua, ... -->
    <ul id="wrap" class="menu">
      <li id="one"><a href="">I</a></li>
      <li id="two"><a href="">ii</a></li>
      <li id="three"><a href="">III</a></li>
    </ul>
  </div>

  <ul class="major-result result act">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
  <ul class="minor-result result">
    <li><a href="#">one minor</a></li>
    <li><a href="#">two minor</a></li>
    <li><a href="#">three minor</a></li>
  </ul>
  <ul class="green-result result">
    <li><a href="#">one green</a></li>
    <li><a href="#">two green</a></li>
    <li><a href="#">three green</a></li>
  </ul>
  <ul class="aqua-result result">
    <li><a href="#">one aqua</a></li>
    <li><a href="#">two aqua</a></li>
    <li><a href="#">three aqua</a></li>
  </ul>
  <ul class="gray-result result">
    <li><a href="#">one gray</a></li>
    <li><a href="#">two gray</a></li>
    <li><a href="#">three gray</a></li>
  </ul>
  <ul class="fuchsia-result result">
    <li><a href="#">one fuchsia</a></li>
    <li><a href="#">two fuchsia</a></li>
    <li><a href="#">three fuchsia</a></li>
  </ul>
  <ul class="orange-result result">
    <li><a href="#">one orange</a></li>
    <li><a href="#">two orange</a></li>
    <li><a href="#">three orange</a></li>
  </ul>

</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.