同じクラスの別の同じIDで別のコードを避ける

Question

私は2つのjquery関数を持っていますが、idは唯一の違いがあります。どちらの場合に1つの機能を果たすためには、どのような変更が必要ですか。クラスセレクタを単独で使用すると、同時に両方が選択されます。

機能 - クリックのドロップダウンリスト、チェックボックスによって選択し、入力ボックスに表示選択：

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

    }); 

}