我与添加到 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);
}
});
});