Jquery选择器中使用变量实现动态选择例子

首先我们来讲解一下JQuery选择器中使用变量实现动态选择的方法，步骤如下：

1. 定义一个变量存储选择器

var selector = "#id";

1. 使用变量作为选择器

$(selector).css("color","red");

其中，$(selector)表示使用变量selector来选择对应的HTML元素，然后进行CSS样式的修改。这种方式就可以使用动态的方式来选择不同的HTML元素。

下面来看两个具体的示例：

示例1

假设我们有一个HTML页面，其中有多个按钮，点击任何一个按钮都会将其背景颜色改变为红色。我们可以通过id属性来选取每个按钮，但是这样写会比较繁琐，因为每个按钮的id都不一样，代码会很长。因此，我们可以采用变量选择器的方式来简化代码。

<button class="btn" data-color="red">按钮1</button>
<button class="btn" data-color="red">按钮2</button>
<button class="btn" data-color="red">按钮3</button>

首先，我们需要给每个按钮添加一个data-color属性，这个属性的值表示按钮按下后要修改背景颜色为什么颜色。接着，在JavaScript中我们定义一个变量color，并将其赋值为被选中按钮的data-color属性。

$(".btn").on("click", function() {
  var color = $(this).data("color");
  $(this).css("background-color",color);
});

这里，$(this)选取了点击事件所在的按钮元素，然后通过data()方法获取该元素的data-color属性值，将其赋值给color变量。最后，通过css()方法，将按钮的背景颜色修改为color变量的值，达到了动态修改样式的效果。

示例2

假设我们需要实现一个树形菜单，用户可以通过点击菜单项来展开或收起子菜单。我们可以使用变量选择器的方式，来为每个菜单项绑定点击事件，并根据其展开或收起子菜单。

<ul class="menu">
  <li class="menu-item">菜单1
    <ul class="sub-menu">
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
  </li>
  <li class="menu-item">菜单2
    <ul class="sub-menu">
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
  </li>
</ul>

每个菜单项包含一个子菜单，当用户点击菜单项时，我们需要展开或收起该菜单项对应的子菜单。这里，我们可以采用变量选择器的方式，来动态选取对应子菜单的元素。

$(".menu-item").on("click", function() {
  var subMenu = $(this).children(".sub-menu");
  if (subMenu.is(":visible")) {
    subMenu.hide();
  } else {
    subMenu.show();
  }
});

这里，.menu-item选取所有的菜单项元素，使用.children(".sub-menu")选取每个菜单项对应的子菜单元素。然后根据子菜单元素当前的显示状态，来判断是展开子菜单还是收起子菜单。最后，使用hide()和show()方法，来修改子菜单元素的显示状态。