Javascript 函数在第一次单击时不切换

我正在写一个网页，它有一个from字段，允许用户选择一个图库来关联图像。有一些选项卡可以突出显示，可用的库是从另一个页面上的php脚本加载的，但我遇到的问题是，第一个按钮只能在第二次单击后切换，这很奇怪，第二个问题是我不知道如何一次只切换一个按钮，所以基本上我只希望一次关联一个库，所以我不希望同时突出显示多个库。我被困住了，任何帮助都将不胜感激。我使用jquery作为JavaScript框架。底部附近的函数并不完全相关，但我想我会包括它们

   var from_post = false; 
   var addOrRemove = true;

     $(document).ready(function() {

          $("#gallery").load('http://localhost/index.php/site/gallerys_avalible/ #gallerys_avalible', function() {
          $('li').click(function(e) {

            //  console.log($('li').index((this)));


             //  e.preventDefault();

                $(this).toggle(
                function(){
                    $(this).css('background-color', '#CC0000');
                     console.log('backgroudn red');
                },
                function(){
                    $(this).css('background-color', '#00A8F0'); 
                           console.log('backgroudn blue');
                });


                return false;
              });  

            });

           /* $('li').live('click', function(e) {  

            });
        */
            $('#addNew').click(function () {
                console.log('i got called');
                $('#new_form').fadeIn(1000); 
            });

            $('form').submit(function() {

                if(from_post) {
                    //submit form

                    return true; 

                } else {

                    //dont submit form. 
                    return false; 

                }
            });

        });

---

感谢所有花时间帮我解决这个问题的人

按照您使用切换的方式，不需要将其包装在中。单击“绑定”。这是事件本身

此代码适用于：

$('li').toggle(
function(){
    $(this).css('background-color', 'red');
},
function(){
    $(this).css('background-color', 'blue'); 
});

---

另外，我不认为切换是你想要的。您希望取消高亮显示所有内容，然后重新高亮显示单击的项目。

使用切换的方式，不需要将其包装在。单击绑定。这是事件本身

此代码适用于：

$('li').toggle(
function(){
    $(this).css('background-color', 'red');
},
function(){
    $(this).css('background-color', 'blue'); 
});

---

另外，我不认为切换是你想要的。您希望取消高亮显示所有内容，然后重新高亮显示单击的项目。

正在运行的函数太多了

关于第二个问题：

document.onLoad(function(){
    $("#gallery").load('http://…');
    $("#gallery > li").toggle(function(){
        function(){$(this).css('background-color', '#CC0000');},
        function(){$(this).css('background-color', 'ORIGINAL_COLOUR');}
    });
});

添加/删除类可能比应用css更好。为此：

document.onLoad(function(){
    $("#gallery").load('http://…');
    $("#gallery > li").click(function(){
        $("#gallery > li").toggleClass("active");
        //this will add .active if it's not there, or remove it if it's already there
    });
});

这也将解决任何点击问题

---

此外，如果您想选择其他所有内容，还可以使用jQuery选择器。

您的函数太多了

关于第二个问题：

document.onLoad(function(){
    $("#gallery").load('http://…');
    $("#gallery > li").toggle(function(){
        function(){$(this).css('background-color', '#CC0000');},
        function(){$(this).css('background-color', 'ORIGINAL_COLOUR');}
    });
});

添加/删除类可能比应用css更好。为此：

document.onLoad(function(){
    $("#gallery").load('http://…');
    $("#gallery > li").click(function(){
        $("#gallery > li").toggleClass("active");
        //this will add .active if it's not there, or remove it if it's already there
    });
});

这也将解决任何点击问题

另外，如果您想选择其他所有内容，还有jQuery选择器。

为什么不直接使用

你为什么不干脆用

---

嘿，非常感谢你的回复！说到jquery.np，我还是个傻瓜。一分钟前，我修改了答案的第一部分代码，我误读了您最初是如何尝试这样做的，但前面的方法也有效。没有什么特别的原因，我是nots的超级粉丝。嘿，我决定使用你的一个旧函数，我不得不对它进行一些修改，但它工作得很好。非常感谢你。这是修改后的代码，适用于任何遇到相同问题的人。$'单击函数{$this.css'background-color'，'CC0000'；$'li'。而不是$this.css'background-color'，'00A8F0'；返回false；}；顺便说一句，not函数或选择器非常棒，谢谢你告诉我嘿，非常感谢你的回复！说到jquery.np，我还是个傻瓜。一分钟前，我修改了答案的第一部分代码，我误读了您最初是如何尝试这样做的，但前面的方法也有效。没有什么特别的原因，我是nots的超级粉丝。嘿，我决定使用你的一个旧函数，我不得不对它进行一些修改，但它工作得很好。非常感谢你。这是修改后的代码，适用于任何遇到相同问题的人。$'单击函数{$this.css'background-color'，'CC0000'；$'li'。而不是$this.css'background-color'，'00A8F0'；返回false；}；顺便说一句，not函数或选择器非常棒，谢谢你告诉我非常感谢您花时间回答我的问题我还有一个问题，我正试图实现你的函数，但我一直收到一个错误，说函数后的逗号是无懈可击的，你知道为什么吗？非常感谢你花时间回答我的问题我还有一个问题，我正试图实现你的函数，但我一直收到一个错误，说函数后的逗号是无懈可击的，你知道为什么吗？非常感谢你花时间回答这个问题非常感谢您抽出时间回答这个问题