當一頁上的兩個相同時，jQuery沖突

Question

我與添加到wordpress后端的jQuery功能發生沖突。 您可以選擇在頁面中添加其中兩個功能，但是當有兩個功能時，第一個有效，而第二個無效。 他們倆必須共享相同的類和ID

這是我的小提琴： http : //jsfiddle.net/yQMvh/39/

的HTML

<div class="plugin">
<div class="iconDisplay">Display's selected icon</div>
<span id="selectedIcon" class="selected-icon"></span>

<button id="selectIconButton">Select Icon</button>
<div id="iconSelector" class="icon-list">
    <div id="iconSearch">
        <label for="icon-search">Search Icon: </label>
        <input type="text" name="icon-search" value="">
    </div>
    <span class="icon-orange"></span>
    <span class="icon-teal"></span>
    <span class="icon-icon3"></span>
    <span class="icon-icon4"></span>
    <span class="icon-icon5"></span>
    <span class="icon-icon6"></span>
    <span class="icon-icon7"></span>
    <span class="icon-tealer"></span>
    </div>
</div>

<div style="height: 50px"></div>


<div class="plugin">
<div class="iconDisplay">Display's selected icon</div>
<span id="selectedIcon" class="selected-icon"></span>

<button id="selectIconButton">Select Icon</button>
<div id="iconSelector" class="icon-list">
    <div id="iconSearch">
        <label for="icon-search">Search Icon: </label>
        <input type="text" name="icon-search" value="">
    </div>
    <span class="icon-orange"></span>
    <span class="icon-teal"></span>
    <span class="icon-icon3"></span>
    <span class="icon-icon4"></span>
    <span class="icon-icon5"></span>
    <span class="icon-icon6"></span>
    <span class="icon-icon7"></span>
    <span class="icon-tealer"></span>
    </div>
</div>

jQuery的

var iconVal = $(".icon_field").val();
$('#selectedIcon').addClass(iconVal);

$("#selectIconButton").click(function () {
  $("#iconSelector").fadeToggle();
});

$("#iconSelector span").click(function () {
  selectIcon($(this));
});

function selectIcon(e) {
 var selection = e.attr('class');
 $(".icon_field").val(selection);
 $("#iconSelector").hide();
 $('#selectedIcon').removeClass();
 $('#selectedIcon').addClass(selection).show();
 return;
}

$('input[name="icon-search"]').keyup(function(){
  var sValue = $(this).val().toLowerCase();

$.each($('span'), function(){
    if($(this).attr('class').indexOf(sValue)===-1){
     $(this).fadeOut(0);   
    }else{
     $(this).fadeIn(0);   
    }
  });

});

Answer 1

評論中明確指出了該問題。 ID在任何給定頁面上必須唯一。 id="iconSelector" -只需將其與icon-list一起添加為類，就可以像class="iconSelector icon-list" 。 通過使用標准的jQuery選擇器技術，您仍然應該能夠根據需要與DOM進行交互。

他們倆必須共享相同的類和ID

這個要求是不合邏輯的。 您將需要重新處理您的過程。

一些建議可以幫助您-可以利用$(this)知道哪個DOM元素觸發了事件-因此您不必擔心ID 。

Answer 2

使用類或元素類型，而不要使用ID。 如有必要，添加類。 例如，

$('#selectedIcon').addClass(iconVal);

變成

$('.selected-icon').addClass(iconVal);

-

$("#selectIconButton").click(function () {
  $("#iconSelector").fadeToggle();
});

變成

$("button").click(function () {
  $(".icon-list").fadeToggle();
});

如評論中所述，您不能使用多個ID。

完整示例：

的HTML

<div class="plugin">
    <div class="iconDisplay">Display's selected icon</div>
    <span id="selectedIcon" class="selected-icon"></span>

    <button id="selectIconButton">Select Icon</button>
    <div id="iconSelector" class="icon-list">
        <div id="iconSearch">
            <label for="icon-search">Search Icon: </label>
            <input type="text" name="icon-search" value="">
        </div>
        <span class="icon-orange"></span>
        <span class="icon-teal"></span>
        <span class="icon-icon3"></span>
        <span class="icon-icon4"></span>
        <span class="icon-icon5"></span>
        <span class="icon-icon6"></span>
        <span class="icon-icon7"></span>
        <span class="icon-tealer"></span>
    </div>
</div>

<div style="height: 50px"></div>


    <div class="plugin">
    <div class="iconDisplay">Display's selected icon</div>
    <span id="selectedIcon" class="selected-icon"></span>

    <button id="selectIconButton">Select Icon</button>
    <div id="iconSelector" class="icon-list">
        <div id="iconSearch">
            <label for="icon-search">Search Icon: </label>
            <input type="text" name="icon-search" value="">
        </div>
        <span class="icon-orange"></span>
        <span class="icon-teal"></span>
        <span class="icon-icon3"></span>
        <span class="icon-icon4"></span>
        <span class="icon-icon5"></span>
        <span class="icon-icon6"></span>
        <span class="icon-icon7"></span>
        <span class="icon-tealer"></span>
    </div>
</div>

JQUERY

var iconVal = $(".icon_field").val();
$('.selected-icon').addClass(iconVal);

$("button").click(function () {
  $(this).siblings(".icon-list").fadeToggle();
});

$(".icon-list span").click(function () {
    selectIcon($(this));
});

function selectIcon(e) {
    var selection = e.attr('class');
    $(".icon_field").val(selection);
    e.parent().hide();
    e.parent().siblings('#selectedIcon').removeClass();
    e.parent().siblings('#selectedIcon').addClass(selection).show();
    return;
}

$('input[name="icon-search"]').keyup(function(){
   var sValue = $(this).val().toLowerCase();

    $.each($('span'), function(){
        if($(this).attr('class').indexOf(sValue)===-1){
         $(this).fadeOut(0);   
        }else{
         $(this).fadeIn(0);   
        }
    });

});

Answer 3

這不是超級幻想，但這是您正在尋找的功能嗎？

http://jsfiddle.net/ccarterc1984/RfW69/

CSS：

#iconSelectionBox{
    width:250px;
    height:250px;      
    background-color: gray;
    position:absolute;
    display:none;          
}
#icon1{
    background-color:blue;        
}
#icon2{
    background-color:black;        
}
#icon3{
    background-color:green;        
}
#icon4{
    background-color:purple;        
}
.icon{        
    height:50px;
    width:50px;
    float:left;
}

HTML：

<div id="iconSelectionBox">
    <input type="text" id="searchBox" /><br/>
    <div id="icon1" class="icon"></div>
    <div id="icon2" class="icon"></div>
    <div id="icon3" class="icon"></div>
    <div id="icon4" class="icon"></div>
</div>

<button class="selectButton">Select Icon</button>
<button class="selectButton">Select Icon</button>

<br/>
<div id="messageBox"></div>

jQuery的：

$('button.selectButton').live('click', function(){
    var iconBox = $('#iconSelectionBox');
    var buttonPos = $(this).position();

    iconBox.show().css('top', buttonPos.top + 100).css('left', buttonPos.left);
});

$('div.icon').live('click', function(event){
    var clickedId = event.target.id;

    $('#messageBox').text("You clicked the icon with id: " + clickedId);

    $('#iconSelectionBox').hide();
});