当一页上的两个相同时，jQuery冲突

Question

I'm having a conflict with a jQuery feature im adding to a wordpress backend. There will be the option of adding two of these features to a page, but when there is two, the first one works and the second one doesnt. They both HAVE to share the same classes and ID's

Here's my fiddle: 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

The issue is pointed out clearly in the comments. ID must be unique on any given page. id="iconSelector" - just add this as a class along with icon-list so it will look like class="iconSelector icon-list" . By using standard jQuery selector techniques you should still be able to interact with the DOM as needed.

They both HAVE to share the same classes and ID's

This requirement is illogical. You'll have to rework your process.

A little advice to help you along the way - you can utilize $(this) to know which DOM element has triggered an event - so you don't need to worry about ID .

Answer 2

Use the classes or element types rather than the id's. Add classes if necessary. For example,

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

becomes

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

--

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

becomes

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

As mentioned in the comments you cannot use multiple ids.

Full example:

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

It's not super fancy, but is this the functionality you are looking for?

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