Question

所以我创建了一个带有<ul>的div，其中包含过滤器列表，当我们点击任何<li>时，它会显示相应的过滤器。

以下看起来不太有希望：

$(".f1").click(function(){
    $(".Field1").removeClass("hidden");
    $(".Field2").addClass("hidden");
    $(".Field3").addClass("hidden");
});

如何创建一个函数，以便当点击'selectul'div中的li时，相应的结果会显示在'optionsdiv'中。

非常感谢。

Answer 1

您只需要使用id，类和脚本进行以下更改。我还附上了代码片段

var curPage = "";
$(document).on("click", "#selectul  a", function() {

  if (curPage.length) {
    $("#" + curPage).hide();
  }
  curPage = $(this).data("page");
  
  $("#" + curPage).show();
  $(this).addClass('activeli').siblings().removeClass('active');


});

body {
  font-family: helvetica;
  font-size: 20px;
}

#content {
  overflow: hidden;
  height: auto;
  width: 60%;
  background-color: white;
  padding: 20px;
  border-radius: 12px;
}

ul,
ul#selectul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

#selectul li {
  border: 1px solid red;
  cursor: pointer;
}

#selectul li:hover {
  background-color: red;
  color: white;
}

#mainbox {
  padding: 20px;
}

#selectitems {
  float: left;
}

.itemslist {
  padding: 7px;
}

#optionsdiv {
  float: left;
  width: 350px;
  height: 193px;
  border: 1px solid red;
}

.activeli {
  background-color: red;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="content">
  <div id="mainbox">

    <div id="selectitems">
      <ul id="selectul">
        <li id="f1">
          <a data-page="page0">
            <div class="itemslist">Field1</div>
          </a>
        </li>
        <li id="f2">
          <a data-page="page1">
            <div class="itemslist">Field2</div>
          </a>
        </li>
        <li id="f3">
          <a data-page="page2">
            <div class="itemslist">Field3</div>
          </a>
        </li>
        <li id="f4">
          <a data-page="page3">
            <div class="itemslist">Field4</div>
          </a>
        </li>
        <li id="f5">
          <a data-page="page4">
            <div class="itemslist">Field5</div>
          </a>
        </li>
      </ul>
    </div>
    <div id="optionsdiv">

      <ul>

        <li>

          <div id="page0" class="Field1 hidden">
            <h3>Options for Field1</h3>
            <input type="checkbox" value="1" />option1
            <input type="checkbox" value="2">option2
            <input type="checkbox" value="3">option3
          </div>
        </li>
        <li>
          <div id="page1" class="Field2 hidden">
            <h3>Options for Field2</h3>
            <input type="checkbox" value="11">option11
            <input type="checkbox" value="12">option12
            <input type="checkbox" value="13">option13
          </div>
        </li>
        <li>
          <div id="page2" class="Field3 hidden">
            <h3>Options for Field3</h3>
            <input type="checkbox" value="21">option21
            <input type="checkbox" value="22">option23
            <input type="checkbox" value="23">option23
          </div>
        </li>

<li>
          <div id="page3" class="Field4 hidden">
            <h3>Options for Field4</h3>
            <input type="checkbox" value="31">option31
            <input type="checkbox" value="32">option33
            <input type="checkbox" value="33">option33
          </div>
        </li>
      
<li>
          <div id="page4" class="Field5 hidden">
            <h3>Options for Field5</h3>
            <input type="checkbox" value="41">option41
            <input type="checkbox" value="42">option42
            <input type="checkbox" value="43">option43
          </div>
        </li>
</ul>
    </div>
  </div>
</div>

Answer 2

我会像你这样注释你的每个元素：

<li class="clickable" data-field="1"><div class="itemslist">Field1</div></li>
<li class="clickable" data-field="2"><div class="itemslist">Field2</div></li>
<li class="clickable" data-field="3"><div class="itemslist">Field3</div></li>
<li class="clickable" data-field="4"><div class="itemslist">Field4</div></li>
<li class="clickable" data-field="5"><div class="itemslist">Field5</div></li>

并使您的复选框部分如此：

<div class="Field1 Field">
<h3>Options for Field1</h3>
<input type = "checkbox" value="1" />option1
<input type = "checkbox" value="2">option2
<input type = "checkbox" value="3">option3
</div>
</li>
<li><div class="Field2 Field">
<h3>Options for Field2</h3>
<input type = "checkbox" value="11">option11
<input type = "checkbox" value="12">option12
<input type = "checkbox" value="13">option13
</div>
</li>
<li>
<div class="Field3 Field">
<h3>Options for Field3</h3>
<input type = "checkbox" value="21">option21
<input type = "checkbox" value="22">option23
<input type = "checkbox" value="23">option23
</div>

然后让你的脚本像这样：

$(".clickable").click(function(){
    $(".Field").hide();
  var element=$(this).data("field");
  $(".Field" + element).show();
})

$(".Field").hide();

如何为li创建一个jquery函数

2 个答案: