Question

我有两个jquery函数完全相同，唯一的区别是id。我需要做些什么改变才能让一个功能同时适用于这两种情况？单独使用类选择器会导致两者同时被选中。

单击功能 - 下拉列表，选中复选框，在输入框中显示选择：

$(document).ready(function(){
$("#location dt a").on('click', function() {
  $("#location dd ul").slideToggle('fast');
});

$("#location dd ul li a").on('click', function() {
  $("#location dd ul").hide();
});

function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("dropdown")) $("#location dd ul").hide();
});

$('#location input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('#location').find('input[type="checkbox"]').val(),
    title = $(this).val() + ",";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('#loc').append(html);
    $(".hida").hide();
  } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida");
    $('#location dt a').append(ret);

  }
});
});

HTML

<label for="proptypes">Type</label>
<dl class="dropdown" id="proptypes"> 
    <dt>
        <a href="#"><p class="multiSel" id="prop"></p></a>
    </dt>
    <dd>
        <div class="mutliSelect">
            <ul>
                <li>
                    <input type="checkbox" value="Blackberry" />Blackberry
                </li>
                <li>
                    <input type="checkbox" value="Sony Ericson" />Sony Ericson
                </li>
            </ul>
        </div>
        </dd>
        </dl>

请注意该功能有效但我只是想减少代码量 - http://christamariebusuttil.com/homesmalta/（功能结果显示在类型和位置输入/选择框中）

Answer 1

https://jsfiddle.net/sudarpochong/0d2q3v61/

包装功能。并称之为。

var box1 = new multiSelectBox("#location", "#loc");

function multiSelectBox(parentId, selectedId) {

  // 
  var _hideSelectionList = function() {
    $(parentId).find("dd ul").hide();
  };

  // hide selection list, on initialization
  _hideSelectionList();

  // 
  $(document).on('click', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) 
        _hideSelectionList();
  });

  // 
  $(parentId).on('click', 'dt a', function() {
    $(parentId).find("dd ul").slideToggle('fast');
  });

  // retrieve checked items in string
  var _getCheckedItems = function() {
    var checkedItems = "";
    $(parentId).find('input[type="checkbox"]')
        .each(function() {
        if ($(this).prop("checked")) {
            checkedItems += $(this).val() + ", ";
        }
      });

    return checkedItems;
  };

  // 
  $(parentId).on('click', 'input[type="checkbox"]', function() {

    var selectedItem = $(this).val() + ",";
    $(selectedId).html(_getCheckedItems());

  });

}

相同类中的同一个类不同的id以避免额外的代码

1 个答案: