php - 当同一页面上有两个相同的 Jquery 时发生冲突

Question

我与添加到 WordPress 后端的 jQuery 功能发生冲突。可以选择将其中两个功能添加到页面中，但是当有两个功能时，第一个功能有效，第二个功能无效。他们都必须共享相同的类和 ID

这是我的 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

评论里已经明确指出了这个问题。 ID 在任何给定页面上都必须是唯一的。 id="iconSelector" - 只需将其与 icon-list 添加为一个类，这样它看起来就像 class="iconSelector icon-list"。通过使用标准 jQuery 选择器技术，您应该仍然能够根据需要与 DOM 进行交互。

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

这个要求是不合逻辑的。您必须重新设计您的流程。

一些可以帮助您的小建议 - 您可以利用 $(this) 来了解哪个 DOM 元素触发了事件 - 因此您无需担心 ID .