Функция не переключается при первом нажатии

Question

Я пишу веб-страницу с полем 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; 

                }
            });

        });

Спасибо всем, кто тратит время, чтобы помочь мне с этим.

Answer 1

У вас слишком много функций.

По второму вопросу:

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 2

почему бы вам просто не использовать .toggle

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

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

Answer 3

То, как вы используете переключатель, не нужно заключать в привязку .click. Это само событие.

Этот код работает:

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

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

Плюс, я не думаю, что переключение - это то, что вы хотите в любом случае. Вы хотите отменить выделение всего, а затем снова выделить выделенный элемент.