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

Answer 1

您首先要在数组中保存网址并在创建a元素之后：

＆＃13;

$("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;
    }
  });
});

＆＃13;

<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>

＆＃13;

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

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

JQuery：创建包含两个数组的链接列表

2 个答案: