0

我对 jQuery 完全陌生，试图编写一些脚本来使导航项#printInteract触发容器边框以更改颜色。感觉这应该工作？这是一个语义错误吗？如果没有，有人可以解释一下我哪里出错了吗？

jQuery： 

$(document).ready(function(){
var printBorder = $("#container").css("border-color", "blue");
function changeBorder() {printBorder}
$("#printInteract").on("click", changeBorder);

});

CSS
#container{height:95%; 位置：相对；.clearfix()；边框：.1875em #fff 实心；}

HTML

 <nav>
    <ul class="navSpaces">
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a></li>
    <li id="printInteract" class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>print</h3></div></a></li>
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>video</h3></div></a></li>
    <li class="navCenter"><a class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>web</h3></div></a></li>
    </ul>
  </nav>
4

2 回答 2

3

你很接近，但有点偏离。我已经评论了您的代码以解释您的错误。

$(document).ready(function(){
    //grab the container whose border you want to change
    var container = $("#container");

    //when this function is called, change the border
    function changeBorder() {
        container.css({'border' : '1px black solid'});
    }

    //watch for the click event and call your function
    $("#printInteract").on("click", changeBorder);
});

此外，在这种情况下，changeBorder 并没有做太多。即，它只改变边界。对于这种情况，您可以只传递一个匿名函数，而不是定义和调用一个函数

$(document).ready(function(){
    //grab the container whose border you want to change
    var container = $("#container");

    //watch for the click event and call your function
    $("#printInteract").on("click", function(){
        //this is the anonymous function. This will only
        // be executed when a click event is triggered
        container.css({'border' : '1px black solid'});
    });
});

脚注：您甚至可以跳过为容器获取 jquery 对象并将其存储在变量中的部分，因为您只引用该对象一次（同时更改边框）。但是，如果您多次引用该对象，则最好将对象“缓存”在变量中，就像上面的代码所做的那样。这是因为每次您请求一个 jQuery 对象时，jQuery 都必须遍历 DOM 以查找与您的选择器匹配的所有元素。因此，通过缓存对象可以获得更好的性能。

编辑：

有一种更好的方法可以在不使用 4 个点击处理程序的情况下完成您正在寻找的事情。事实上，您当然应该尽量减少您在页面中使用的事件侦听器的数量，因为每个事件侦听器都会造成损失。

实现您正在寻找的一种方法是创建一个用作查找表的 Javascript 对象。

在此处查看演示

这是我使用的 Javascript / Jquery 代码：

//this is the lookup table that maps
// id with the color scheme
var borderScheme = {
    'printInteract' : '1px solid blue',
    'videoInteract' : '1px solid orange',
    'webInteract' : '1px solid pink',
    'allInteract' : '1px solid white'
};

$(document).ready(function(){
    // i am applying border to the entire nav element
    var nav = $('nav');

    //we attach a single click listener on li elements
    $('li').on('click',function(){

        // get the id of the clicked li
        var id = $(this).attr('id');

        // lookup the corresponding border scheme from the lookup table
        var color = borderScheme[id];

        // was there a color defined?
        if (color != 'undefined') {
            // if yes, make the change
            nav.css({'border': color});
        }
    });
});

​
于 2012-06-06T06:23:48.117 回答
0

检查此解决方案：

http://jsfiddle.net/6VLgJ/

希望这对您有所帮助并为您工作

于 2012-06-06T06:24:56.680 回答