同一页面上的某些 JavaScript 和 jQuery 之间存在冲突

Question

我使用 JavaScript 函数和一些 jQuery 在页面上执行两个操作。第一个是一个简单的 JS 函数，用于隐藏/显示 div 并更改选项卡的活动状态：

这是显示/隐藏 div 并更改某些选项卡上的活动状态的 JS：

var ids=new Array('section1','section2','section3');

function switchid(id, el){  
    hideallids();
    showdiv(id);

    var li = el.parentNode.parentNode.childNodes[0];
    while (li) {
        if (!li.tagName || li.tagName.toLowerCase() != "li")
            li = li.nextSibling; // skip the text node
        if (li) {
          li.className = "";
          li = li.nextSibling;
        }
    }
    el.parentNode.className = "active";
}

function hideallids(){
    //loop through the array and hide each element by id
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }         
}

function hidediv(id) {
    //safe function to hide an element with a specified id
        document.getElementById(id).style.display = 'none';
}

function showdiv(id) {
    //safe function to show an element with a specified id        
        document.getElementById(id).style.display = 'block';
}

html：

<ul>
<li class="active"><a onclick="switchid('section1', this);return false;">ONE</a></li>
<li><a onclick="switchid('section2', this);return false;">TWO</a></li>
<li><a onclick="switchid('section3', this);return false;">THREE</a></li>
</ul>

<div id="section1" style="display:block;">TEST</div>
<div id="section2" style="display:none;">TEST 2</div>
<div id="section3" style="display:none;">TEST 3</div>

现在问题....

我已将名为 Galleria 的 jQuery 图像库添加到其中一个选项卡中。当图库驻留在最初设置为 display:block 的 div 中时，效果很好。但是，当它位于设置为 display: none 的 div 之一时；当 div 切换为可见时，图库的一部分不起作用。具体来说，以下 css 不再被编写（这是由 galleria jQuery 创建的）：

element.style  {
display:block;
height:50px;
margin-left:-17px;
width:auto;
}

对于我的一生，我无法弄清楚为什么当画廊的 div 设置为 display: none 时会失败。由于单击选项卡时（通过上面的 Javascript 函数）此声明会被覆盖，为什么这会导致问题呢？正如我所提到的，当它位于 in display: 块时，它可以完美地工作；分区

有什么想法吗？我不希望有人熟悉 jQuery Galleria 图片库...但也许知道如何修复这个问题？

谢谢！

Answer 1

如果您包含 jQuery，那么您可以将 javascript 缩短为：

$(function() {

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

我还将删除设置 display:none 的内联样式。然后你可以在你的 JavaScript 中初始化 Galleria 然后隐藏你的部分。

像这样的东西：

$(function() {

$('#section2, #section3').hide();
$('#section2 .images').galleria();

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

我什至会更进一步，将你的html更改为这样的：

<ul class="sectionlinks">
<li class="active"><a href="#section1">ONE</a></li>
<li><a href="#section2">TWO</a></li>
<li><a href="#section3">THREE</a></li>
</ul>

<div id="section1" class="section">TEST</div>
<div id="section2" class="section">TEST 2</div>
<div id="section3" class="section">TEST 3</div>

然后你的javascript可能只是：

$(function() {

$('#section2 .images').galleria();
$('#section2, #section3').hide();

var sections = $('.section');
$('.sectionlinks a').click(function(e){
    e.preventDefault();
    sections.hide();
    $($(this).attr('href')).show();
    $(this).closest('ul').find('li').removeClass('active');
    $(this).closest('li').addClass('active');
});

});

工作示例： http://jsfiddle.net/cdaRu/2/

Answer 2

默认情况下将它们全部设置为“阻止”，初始化画廊图片库，然后隐藏您想要隐藏的 div，看看是否可以解决问题。或者尝试在每次 switchid 之后再次初始化图库。

Answer 3

我的第一个建议是重写原始 Javascript 函数以使用 jQuery。它已经具有内置的可见性切换功能......使用相同的系统将最大限度地减少冲突并使代码更流畅。

Answer 4

这只是“即兴”，但盒子模型可能不完整：“该元素根本不会生成盒子”，display：none;

也许将其改回“block”并设置可见性：隐藏；会更好吗？