使用 jQuery 将标签标签复制到页面的另一部分

Question

我有一个允许用户过滤一组产品的表单。当他们单击单选按钮时，它会自动通过 ajax 将表单提交到页面的另一个部分，这意味着页面和表单永远不会刷新。我有 3 组收音机选项。我想在另一个 div 中显示每个当前选择的标签，以便他们可以一目了然地看到当前应用的过滤器。这是我现在拥有的：

<form id="myform" action="blah.php">
  <label for="allprice">
    <input type="radio" name="cat[price]" id="allprice" value="1" />
    All Price Ranges</label>
  <label for="m-150-300">
    <input type="radio" name="cat[price]" id="m-150-300" value="2" />
    $150 - $300</label>
  <label for="m-300-700">
    <input type="radio" name="cat[price]" id="m-300-700" value="3" />
    $300 - $700</label>
  <br />
  <br />
  <label for="allmaterial">
    <input type="radio" name="cat[material]" id="allmaterial" value="4" />
    All Materials</label>
  <label for="straw">
    <input type="radio" name="cat[material]" id="straw" value="5" />
    Straw</label>
  <label for="felt">
    <input type="radio" name="cat[material]" id="felt" value="6" />
    Felt</label>
  <br />
  <br />
  <label for="allcolor">
    <input type="radio" name="cat[color]" id="allcolor" value="4" />
    All Colors</label>
  <label for="blue">
    <input type="radio" name="cat[color]" id="blue" value="5" />
    Blue</label>
  <label for="green">
    <input type="radio" name="cat[color]" id="green" value="6" />
    Green</label>
</form>

<div class="filters">
Current Filters: <span class="current-filters">Straw, Green</span>
</div>

它说“当前过滤器”的地方是我要列出当前选中的单选框的地方。此外，如果选择“全部”任何内容，我希望它被忽略。

如何获取选定单选框的标签并在逻辑意义上将它们显示在其他地方以逗号分隔，除了最后一个，如果选择“全部”则忽略？此外，如果只为所有这些都选择了“全部”，我怎么能将它设置为“未应用过滤器”这可以用 jQuery 实现吗？

Answer 1

我建议如下

1. 将每个部分包装到一个带有类的包装器中（下面的示例有div.control-group）
2. 为您的“全部”单选按钮添加一个数据属性以区别于非全部项目（下面的示例使用data-all="all"）

HTML：

<form id="myform" action="blah.php">
    <div class="control-group">
        <label for="allprice">
            <input type="radio" name="cat[price]" id="allprice" value="1" data-all="all" />
            All Price Ranges</label>
        <label for="m-150-300">
            <input type="radio" name="cat[price]" id="m-150-300" value="2" />
            $150 - $300</label>
        <label for="m-300-700">
            <input type="radio" name="cat[price]" id="m-300-700" value="3" />
            $300 - $700</label>
    </div>
    <br />
    <br />
    <div class="control-group">
        <label for="allmaterial">
            <input type="radio" name="cat[material]" id="allmaterial" value="4" data-all="all"/>
            All Materials</label>
        <label for="straw">
            <input type="radio" name="cat[material]" id="straw" value="5" />
            Straw</label>
        <label for="felt">
            <input type="radio" name="cat[material]" id="felt" value="6" />
            Felt</label>

    </div>
    <br />
    <br />
    <div class="control-group">
        <label for="allcolor">
            <input type="radio" name="cat[color]" id="allcolor" value="4" data-all="all"/>
            All Colors</label>
        <label for="blue">
            <input type="radio" name="cat[color]" id="blue" value="5" />
            Blue</label>
        <label for="green">
            <input type="radio" name="cat[color]" id="green" value="6" />
            Green</label>

    </div>
</form>

<div class="filters">
Current Filters: <span class="current-filters"></span>
</div>

<button id="filter-me">Filter</button>

Javascript（在#filter-me 按钮点击时触发）：

<script language="JavaScript">
    $('#filter-me').click(function(){
        var newarr = [];
        $('#myform .control-group input:checked').each(function(){
            if ($(this).attr('data-all') !== 'all') {
                newarr.push($(this).closest('label').text());
            };
        });
        $('.current-filters').text(newarr.join(', '));
    });
</script>