Question

我是一个JS新手，所以我希望这对专家来说很容易。我有一个脚本，当前拉出任何div与一个匹配单个选中的单选按钮的类。我想更改代码，以便脚本从多个选中的单选框中提取任何类的div。因此，例如，如果我检查了两个单选按钮，我只想查看具有这两个类的div。这是当前的设置：

Javascript

$(document).ready(function () {
    $('div.tags').find('input:radio').live('click', function () {
        $('.results > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.results > li.' + $(this).attr('rel')).show();
        });
    });
});

HTML：

    <div class="tags">
        <label>
            <input type="radio" name="gender" rel="boys" />Boys
        </label>
        <label>
            <input type="radio" name="gender" rel="girls" />Girls
        </label>
        <label>
            <input type="radio" name="gender" rel="allgenders" checked />All
        </label>
        <label>
            <input type="radio" name="style" rel="vintage" />Vintage
        </label>
        <label>
            <input type="radio" name="style" rel="simple" />Simple
        </label>
    </div>
    <ul id="cardsWrapper" class="results">
        <li class="cardsearchWrapper girls allgenders simple">
            girls allgenders simple
        </li>
        <li class="cardsearchWrapper boys allgenders vintage">
            boys allgenders vintage
        </li>
        <li class="cardsearchWrapper girls allgenders vintage">
            girls allgenders vintage
        </li>
        <li class="cardsearchWrapper boys allgenders simple">
            boys allgenders simple
        </li>
    </ul>

但这只会选择名为单选按钮

的“性别”类

谢谢！

Answer 1

我建议您假设您可以切换到使用on()代替live()：

// select those <input> elements with a 'rel' attribute,
// and assign a change-event handler:
$('input[rel]').on('change', function() {
  // iterate over the checked <input> elements within the
  // .tags element(s), and create a map containing the
  // value of their 'rel' attribute:
  var classes = $('.tags input:checked').map(function() {
    return this.getAttribute('rel');
  // using get() to create an array from the map:
  }).get();

  // hiding all the <li> elements within the #cardsWrapper element,
  // then filtering those <li> elements:
  $('#cardsWrapper li').hide().filter(function() {
    // keeping only those elements for whom the following
    // assessment returns true,
    // checking, using is(), that the current element has
    // all the required classes:
    return $(this).is('.' + classes.join('.'));
  // if it does, it's kept in the collection (otherwise discared)
  // and then shown:
  }).show();
// triggering the change event, to fire the change-handler (above)
// on page-load/DOM-ready:
}).change();

$('input[rel]').on('change', function() {
  var classes = $('.tags input:checked').map(function() {
    return this.getAttribute('rel');
  }).get();
  $('#cardsWrapper li').hide().filter(function() {
    return $(this).is('.' + classes.join('.'));
  }).show();
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tags">
  <label>
    <input type="radio" name="gender" rel="boys" />Boys
  </label>
  <label>
    <input type="radio" name="gender" rel="girls" />Girls
  </label>
  <label>
    <input type="radio" name="gender" rel="allgenders" checked />All
  </label>
  <label>
    <input type="radio" name="style" rel="vintage" />Vintage
  </label>
  <label>
    <input type="radio" name="style" rel="simple" />Simple
  </label>
</div>
<ul id="cardsWrapper" class="results">
  <li class="cardsearchWrapper girls allgenders simple">
    girls allgenders simple
  </li>
  <li class="cardsearchWrapper boys allgenders vintage">
    boys allgenders vintage
  </li>
  <li class="cardsearchWrapper girls allgenders vintage">
    girls allgenders vintage
  </li>
  <li class="cardsearchWrapper boys allgenders simple">
    boys allgenders simple
  </li>
</ul>

而且，在简单的JavaScript中：

// creating a named function to handle the change event:
function showAppropriate() {
  // 'this' is passed in via the use of addEventListener()
  // later, and refers to the <div class="tags"> node.

  // using querySelectorAll() to find all checked <input>
  // elements with 'rel' attribute within 'this':
  var checked = this.querySelectorAll('input[rel]:checked'),
    // using Array.prototype.map(), along with
    // Function.prototype.call(), to create an array of
    // the checked <input>s' 'rel' attribute-values:
    classes = Array.prototype.map.call(checked, function(input) {
      return input.getAttribute('rel');
    }),
    // finding the element containing the <li> elements:
    list = document.querySelector('#cardsWrapper'),

    // finding all the <li> elements within that element:
    hide = list.querySelectorAll('li'),

    // finding all <li> elements with the required classes,
    // by converting the array of class-names to a string,
    // joining the array together with '.' characters:
    show = list.querySelectorAll('li.' + classes.join('.'));

  // using Array.prototype.forEach(), and Function.prototype.call(),
  // to iterate over all <li> elements to hide them:
  Array.prototype.forEach.call(hide, function(li) {
    li.style.display = 'none';
  });

  // as above, but showing these elements:
  Array.prototype.forEach.call(show, function(li) {
    li.style.display = 'list-item';
  });
}

var selection = document.querySelector('.tags');

selection.addEventListener('change', showAppropriate);

function showAppropriate() {
  var checked = this.querySelectorAll('input[rel]:checked'),
    classes = Array.prototype.map.call(checked, function(input) {
      return input.getAttribute('rel');
    }),
    list = document.querySelector('#cardsWrapper'),
    hide = list.querySelectorAll('li'),
    show = list.querySelectorAll('li.' + classes.join('.'));

  Array.prototype.forEach.call(hide, function(li) {
    li.style.display = 'none';
  });
  Array.prototype.forEach.call(show, function(li) {
    li.style.display = 'list-item';
  });
}

var selection = document.querySelector('.tags');

selection.addEventListener('change', showAppropriate);

<div class="tags">
  <label>
    <input type="radio" name="gender" rel="boys" />Boys
  </label>
  <label>
    <input type="radio" name="gender" rel="girls" />Girls
  </label>
  <label>
    <input type="radio" name="gender" rel="allgenders" checked />All
  </label>
  <label>
    <input type="radio" name="style" rel="vintage" />Vintage
  </label>
  <label>
    <input type="radio" name="style" rel="simple" />Simple
  </label>
</div>
<ul id="cardsWrapper" class="results">
  <li class="cardsearchWrapper girls allgenders simple">
    girls allgenders simple
  </li>
  <li class="cardsearchWrapper boys allgenders vintage">
    boys allgenders vintage
  </li>
  <li class="cardsearchWrapper girls allgenders vintage">
    girls allgenders vintage
  </li>
  <li class="cardsearchWrapper boys allgenders simple">
    boys allgenders simple
  </li>
</ul>

参考文献：

CSS：
- Attribute-selectors。
- :checked。
JavaScript的：
- Array.prototype.forEach()。
- Array.prototype.map()。
- Array.prototype.slice()。
- document.querySelector()。
- document.querySelectorAll()。
- Element.getAttribute()。
- Function.prototype.call()。
- HTMLElement.style。
jQuery的：
- change()。
- filter()。
- get()。
- hide()。
- is()。
- map()。
- on()。
- show()。

Answer 2

代码变得有点复杂，但可以完成。您只需要获取每个输入的选中值并从那里开始：

＆＃13;

$('input[type=radio]').on('change', function() {
  // Step 1: Get all of the checked inputs.
  var inputs = $('input[type=radio]:checked');

  // Step 2: Get all of the list items and reset their visibility.
  var lis = $('#cardsWrapper li');
  lis.show();
  
  // Step 3: For each checked input, get the rel. If it's valid,
  //         hide the non-matching elements.
  inputs.each(function(i, e) {
    var value = $(e).attr('rel');
    if(value) lis.not('.' + value).hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tags">
  <label>
    <input type="radio" name="gender" rel="boys" />Boys
  </label>
  <label>
    <input type="radio" name="gender" rel="girls" />Girls
  </label>
  <label>
    <input type="radio" name="gender" rel="allgenders" checked />All
  </label>
  <label>
    <input type="radio" name="style" rel="vintage" />Vintage
  </label>
  <label>
    <input type="radio" name="style" rel="simple" />Simple
  </label>
</div>
<ul id="cardsWrapper" class="results">
  <li class="cardsearchWrapper girls allgenders simple">
    girls allgenders simple
  </li>
  <li class="cardsearchWrapper boys allgenders vintage">
    boys allgenders vintage
  </li>
  <li class="cardsearchWrapper girls allgenders vintage">
    girls allgenders vintage
  </li>
  <li class="cardsearchWrapper boys allgenders simple">
    boys allgenders simple
  </li>
</ul>

＆＃13;

Answer 3

以下是更改其中一个单选按钮时代码的作用：

隐藏所有li元素
显示所有匹配的性别元素（无论样式）
显示所有匹配的样式元素

您没有“隐藏”步骤3中显示的步骤3中不匹配的样式元素。

也许尝试颠倒逻辑：

显示所有li元素
隐藏所有不匹配的性别元素
隐藏所有不匹配的样式元素。

Answer 4

你已经有了一些不错的建议，我只是添加了以下方法来展示另一种方法：

$(document).ready(function () {
    $('div.tags').find('input:radio[name="gender"], input:radio[name="style"]').on('click', function () {
        $('#cardsWrapper li').hide();
        gender = $('input:radio[name="gender"]:checked').attr("rel");
        style = $('input:radio[name="style"]:checked').attr("rel");
        $('#cardsWrapper li' + (gender ? ('.' + gender) : '') + (style ? ('.' + style) : '')).show();
    });
});

简单的Javascript div选择新手

4 个答案: