Question

我是jQuery的新手，试图编写一些脚本来制作导航项#printInteract来触发容器边框来改变颜色。感觉这应该有用吗？这是一个语法错误吗？如果没有，有人可能会解释我出错的地方吗？

jQuery：

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

});

CSS
的#container {高度：95％;位置：相对; .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}); } }); });

Answer 2

检查此解决方案：

http://jsfiddle.net/6VLgJ/

希望这个帮助对您有用

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

2 个答案: