JQuery：使用两个数组创建链接列表答案

【问题标题】：JQuery: Create list of links with two arraysJQuery：使用两个数组创建链接列表
【发布时间】：2014-12-19 00:03:36
【问题描述】：

所以，我正在尝试编写一些 jQuery，从选定的复选框中提取值和自定义数据 (html5) 以创建链接列表。链接文本将来自值，而链接源将来自自定义数据。我已经为链接文本和 url 创建了数组，但是当我尝试为所选选项创建链接列表时，url 显示为只是一个字母。关于我做错了什么有什么想法吗？我在这里创建了一个 JSFiddle：http://jsfiddle.net/3wx6d5cy/

HTML：

<form method="post" id="resources">
    <label><input type="checkbox" data-url="http://option1.com" value="Option 1" >Option 1</label>
    <label><input type="checkbox" data-url="https://option2.com" value="Option 2" >Option 2</label>
    <label><input type="checkbox" data-url="https://option3.com" value="Option 3" >Option 3</label>
    <button type="button" id="showResults">Show Resources</button>
</form>
<ul id="results"></ul>

JS：

$("document").ready(function () {
    $("#showResults").click(function () {
        var linkValues = $('input:checkbox:checked').map(function () {
            return this.value;
        }).get();
        var linkURL = $('input:checkbox:checked').data('url');

        // Check if any checkboxes are selected
        var ifChecked = $('#resources :checkbox:checked').length;

        function switchCheck(n) {
            if (n == 0) {
                caseNum = 0;
            } else {
                caseNum = 1;
            }
        }
        switchCheck(ifChecked);

        switch (caseNum) {
            // Alert if no checkboxes are selected
            case (0):
                alert("Please select an option.");
                break;

                // Store value and data attributes in an array
            case (1):
                $.each(linkValues, function (i, val) {
                    $("#results").append("<li><a href='" + linkURL[i] + "'>" + val + "</a> ");
                });
                break;
        }
    });
});

【问题讨论】：

标签： jquery arrays html each

【解决方案1】：

您必须首先将 url 保存在一个数组中，然后创建 a 元素：

$("document").ready(function() {
  $("#showResults").click(function() {
    var linkValues = $('input:checkbox:checked').map(function() {
      return this.value;
    }).get();

    //here save urls in an array using map
    var linkURL = $('input:checkbox:checked').map(function() {
      return $(this).data('url');
    });

    // Check if any checkboxes are selected
    var ifChecked = $('#resources :checkbox:checked').length;

    function switchCheck(n) {
      if (n == 0) {
        caseNum = 0;
      } else {
        caseNum = 1;
      }
    }
    switchCheck(ifChecked);

    switch (caseNum) {
      // Alert if no checkboxes are selected
      case (0):
        alert("Please select an option.");
        break;

        // Store value and data attributes in an array
      case (1):
        $.each(linkValues, function(i, val) {
          $("#results").append("<li><a href='" + linkURL[i] + "'>" + val + "</a> ");
        });
        break;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="resources">
  <label>
    <input type="checkbox" data-url="http://option1.com" value="Option 1">Option 1</label>
  <label>
    <input type="checkbox" data-url="https://option2.com" value="Option 2">Option 2</label>
  <label>
    <input type="checkbox" data-url="https://option3.com" value="Option 3">Option 3</label>
  <button type="button" id="showResults">Show Resources</button>
</form>
<ul id="results">
  </div>

OP 中的问题是您从复选框中获取值并在循环中解析字符串。这就是为什么linkURL[i] 得到值h。 h 是 http://option1.com 字符串中的第一个字符。您必须将值保存在数组中，然后附加到 dom 中。

【讨论】：

@user3723918 工作得很好（第二次点击不会清除以前的列表，但谁在乎呢？），但是这个switchCheck 和switch 本身......这么多行而不是简单的if-else .
@Regent 向我展示 OP 中“必须清理以前的列表”的要求
@AlexChar 这不是关于要求，而是关于美丽和合乎逻辑的行为。我没说你应该做，是给user3723918的，是他的问题。与无用的switchCheck 和switch 相同。

【解决方案2】：

代码看起来过于复杂。我看不出在这种情况下使用数组和switch 的原因。

Fiddle

$(document).ready(function()
{
    $("#showResults").click(function()
    {
        var checked = $('#resources :checkbox:checked');
        var html = "";
        if (checked.length == 0)
        {
            alert("Please select an option.");
        }
        else
        {
            checked.each(function()
            {
                html += "<li><a href='" + $(this).data('url') + "'>" + this.value + "</a></li>";
            });
        }
        $('#results').html(html);
    });
});

【讨论】：