Question

我正在编写一个网页，其中包含一个允许用户选择图库以关联图像的字段。你可以突出显示标签，并且可以从另一个页面上的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; 

                }
            });

        });

感谢任何花时间帮助我解决这个问题的人。

Answer 1

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

此代码有效：

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

http://jsfiddle.net/MRNwT/1/

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

Answer 2

你已经有太多的功能了。

关于第二个问题：

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 :not()选择器。

Answer 3

为什么不简单地使用.toggle

 $('li').toggle(function() {         

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

功能不会在第一次单击时切换

3 个答案: