jquery .on ('click') переключает css этого элемента li + вызывает функцию одновременно

0

У меня есть несколько списков и вы хотите переключить css (background) этого элемента li, когда нажимаете кнопку "Запустить всплывающее окно", всплывающее окно работает, но не может заставить переключатель включения/выключения работать, который меняет цвет фона элемента щелкнул.

вот приведенный ниже код//его внизу основная часть question-, если кто-нибудь может сообщить мне, как это могло быть достигнуто, что было бы замечательно + высоко оценено

function displayChannels() {
    $.each(channel_list, function (index, channel) {
        //Make the code for the channel
        var code_channel = "<li><img src='" + channel._icon + "'/></li>";
        //Display it
        $("#channel-list").append(code_channel);
        //Open a list for the channel program list
        var code_prog_list = "<ul class='channel_row'>";
        //Add each program in it as a li each time
        $.each(channel._programs, function (index, programme) {
            code_prog_list += "<li><div class='text-left'>" + "<h5>" + programme._hour + ":" + programme._minutes + "</h5>" + "<h6>" + programme._title + "</h6>" + "<p>" + programme._cat + " (" + programme._duree + "mn)" + "</p></div>" + "<div class='programme_icon'><img src='" + programme._icon + "'' alt=''/></div>" + "<div class='desc'>" + programme._desc + "</div>" + "<div class='star'>" + programme._star + "</div>";
            code_prog_list += "</li>";
            //$(this).children().width(programme._width);
            //$(this).css( "width", programme._width + 'px');
            //$( "#channel_row li").width(programme_width);
            //$(this).children('.channel_row li').width(programme._width);
        });
        //Close the list
        code_prog_list += "</ul>";
        //Display it
        $("#prog-grid").append(code_prog_list);
        $("#prog-grid ul").last().resizePrograms();
    });
    $("#loader").hide();
    scrollTime();
    $(".channel_row li").on("click", showPopup);
    $("#popup").on("click", function () {
        $("#popup").toggle(500);
    });
}
function showPopup() {
    var x = "<div id='close_button'></div>";
    $("#popup").html(x).show(500);
    $(this).children().css("background", "red");
}
  • 0
    используйте event.stopPropagation () jquery, чтобы предотвратить выполнение родительского события. api.jquery.com/event.stoppropagation
Теги:

3 ответа

0
Лучший ответ

Я использовал ваш код и создал образец Fiddle Here
Как указано выше, вам просто нужно удалить другие цвета фона и установить текущее то, что вы хотите. Я изменил вашу последнюю функцию на это: 

function showPopup() {
var x = "<div id='close_button'></div>";
$("#popup").html(x).show(500);
$(".channel_row li").children().css('background-color','');
$(this).children().css('background-color','red');
}
Поделиться
  • 0
    эй, большое спасибо, это работает, я выбираю детей, хотя - есть идеи по выбору самого элемента li вместо двух дочерних элементов div внутри? еще раз спасибо, что нашли время, чтобы ответить
  • 0
    Нет проблем, я обновил FIDDLE (нажмите здесь) до того, что, я думаю, вы имеете в виду, и, как всегда, всегда отмечается как «помеченный как ответ» :)
Показать ещё 3 комментария
0

Добавьте класс, затем удалите и добавьте по мере необходимости -

function showPopup() {
    var x = "<div id='close_button'></div>";
    $("#popup").html(x).show(500);
    $('li').removeClass('redClass'); // remove those with the class first
    $(this).children().addClass('redClass'); // add the class to the current selected
}
Поделиться
  • 0
    Спасибо, это здорово, однако, как он может переключаться так, чтобы при щелчке другого li изменялся li, а другой возвращался в исходное состояние? спасибо, что нашли время, чтобы ответить
  • 0
    Две строки кода делают именно это: при щелчке по li сначала очищаются все li (возвращаются в исходное состояние), затем выбранная изменяется.
0

Вы можете попробовать использовать удобную функцию toggleClass в самом LI и оставить CSS, чтобы понять, как обрабатывать цвета фона?

См. Пример здесь: http://jsfiddle.net/mmJy3/

$(this).toggleClass("onecolor");

.toggleClass() - Справочник по API JQuery

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню