jquery - 单击另一个对象更改边框颜色

Question

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

jQuery:

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

});

CSS
#容器{高度:95%；position:relative；.clearfix()； border:.1875em #fff solid;

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>

Answer 1

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

$(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 对象。

See the demo here

这是我使用的 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});
        }
    });
});

​