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

Question

所以，我正在尝试编写一些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;
        }
    });
});

- m-use

Answer 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中。

- Alex Char

---

@user3723918的工作非常出色（第二次点击不会清除先前的列表，但谁在乎呢？），但是这个switchCheck和switch本身...太多行而不是简单的if-else。 - Regent

@Regent请向我展示OP中要求“必须清除先前列表”的要求。 - Alex Char

@AlexChar，这不是关于需求的问题，而是关于美观和逻辑行为的问题。我并没有说你应该这样做，这是针对用户3723918的，这是他的问题。与无用的switchCheck和switch一样。 - Regent

Answer 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);
    });
});

- Regent