[英]jquery .on('click') toggle css of this li element + call function same time
I have a number of lists, and want to toggle the css (background) of this li element when this is clicked launching a popup, the popup is working but cant get the on/off toggle to work which changes the background color of the item clicked. 我有很多列表,并且要在单击该 li元素的css(背景)时启动一个弹出窗口,该弹出窗口正在工作,但无法打开/关闭切换,从而更改了项目的背景颜色点击。
here is the code below// its at the bottom the main part of the question- if any one can let me know how the above could be acheived that would be great + much appreciated 这是下面的代码//在问题的底部是它的底部-是否有人可以让我知道如何实现上述要求,这将是非常好的,并且非常感谢
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's 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");
}
Add a class, then remove and add as needed - 添加一个类,然后根据需要删除并添加-
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
}
You could try using the handy toggleClass function on the LI itself and leave CSS to figure out how to handle the background colors? 您可以尝试在LI本身上使用方便的toggleClass函数,而让CSS弄清楚如何处理背景色?
See example here: http://jsfiddle.net/mmJy3/ 在此处查看示例: http : //jsfiddle.net/mmJy3/
$(this).toggleClass("onecolor");
.toggleClass() - JQuery API Reference .toggleClass()-JQuery API参考
I used your code and created a sample Fiddle Here 我使用了您的代码并在此处创建了一个样本Fiddle
As stated above, you just need to remove the other background colors and set the current one to what you want. 如上所述,您只需要删除其他背景色并将当前的背景色设置为所需的颜色即可。 I changed your last function to this:
我将您的最后一个功能更改为:
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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.