代码之家 › 专栏 › 技术社区 › user279860

同一页面上的某些javascript和jquery之间存在冲突

conflict jquery javascript

3

user279860 · 技术社区 · 16 年前

我使用一个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中时,Gallery工作得很好。但是,当它位于设置为显示的某个div中时:无;当该div被切换为可见时,部分库将不工作。具体来说,以下CSS将停止编写(这是由Galleria jquery创建的):

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

对于我的生活,我不明白为什么画廊的DIV设置为显示时失败了:无。由于在单击选项卡时(通过上面的javascript函数)会覆盖此声明,为什么会导致问题?正如我提到的,当它在显示区:block;div.

有什么想法吗?我不希望有人熟悉jquery galleria图片库…但也许是一个如何修复这个问题的想法?

谢谢!

4 回复 | 直到 16 年前

1

4

PetersenDidIt 16 年前

如果包含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/

2

1

stagas 16 年前

默认情况下,将它们全部设置为“block”,初始化Galleria图像库,然后隐藏要隐藏的div,查看是否修复了它。或者在每次switchID之后再次尝试初始化库。

3

1

EAMann 16 年前

我的第一个建议是重新编写最初的javascript函数来使用jquery。它已经有内置的可见性切换功能…使用相同的系统将最小化冲突并使代码更平滑。

4

1

Mark Schultheiss 16 年前

这只是“即兴表演”,但也许盒子模型是不完整的:“元素根本不会产生盒子”。 display: none;

也许把它改回“block”并设置 visibility: hidden; 会更好吗?