[英]Insert HTML inside if statement
I have list where I am inserting the image through jQuery. 我有列表,我通过jQuery插入图像。
$("#icon1").html('<img src="images/summary_icon_u.png" />');
This is my list 这是我的清单
<ul>
<li data-menuanchor="firstPage" class="one">
<a href="#firstPage" class="cmIcon" id="icon1"></a>
</li>
<li data-menuanchor="secondPage" class="two">
<a href="#secondPage" class="cmIcon" id="icon2"></a>
</li>
</ul>
I have few navigation list like this. 我这样的导航列表很少。 When each list is clicked, an 'active' class is called on.
单击每个列表时,将调用“活动”类。
My need is when I click the list, if the list has class 'active' then it should append a html or else it should append another html. 我需要的是当我点击列表时,如果列表中有“活动”类,那么它应该附加一个html,否则它应该附加另一个html。
This is my code below I tried but not working. 这是我下面的代码我试过但没有工作。
$(document).ready(function() {
$('li.one').click(function() {
if ($(this).hasClass('active')) {
$("#icon1").html('<img src="images/summary_icon_u.png" />');
} else {
$("#icon1").html('<img src="images/summary_icon_c.png" />');
}
});
$('li.two').click(function() {
if ($(this).hasClass('active')) {
$("#icon2").html('<img src="images/audi_risk_u.png" />');
} else {
$("#icon2").html('<img src="images/audi_risk_c.png" />');
}
});
});
Thanks in advance. 提前致谢。
You need to put your code in to a click handler for the li.one
element. 您需要将代码放入
li.one
元素的单击处理程序中。 Try this: 尝试这个:
$(document).ready(function() {
$('li.one').click(function() {
if ($(this).hasClass('active')) {
$("#icon1").html('<img src="images/summary_icon_u.png" />');
} else {
$("#icon1").html('<img src="images/summary_icon_c.png" />');
}
});
});
Note that you can also shorten this code by using a ternary expression: 请注意,您还可以使用三元表达式缩短此代码:
$(document).ready(function() {
$('li.one').click(function() {
$("#icon1").html('<img src="images/summary_icon_' + ($(this).hasClass('active') ? 'u' : 'c') + '.png" />');
});
});
Now that you've added your current HTML and JS code I can see that you can DRY up the code with a single event handler which traverses the DOM from the current li
to find the related a
element. 现在您已经添加了当前的HTML和JS代码,我可以看到您可以使用单个事件处理程序来干掉代码,该处理程序遍历当前
li
的DOM以查找相关a
元素。 Try this: 尝试这个:
$(document).ready(function() {
$('li').click(function() {
$(this).find('a').html('<img src="images/summary_icon_' + ($(this).hasClass('active') ? 'u' : 'c') + '.png" />');
});
});
As per your new requirement you can do this to store the icon source: 根据您的新要求,您可以执行此操作来存储图标来源:
<ul>
<li data-menuanchor="firstPage"
data-imgsrc="summary_icon_c.png"
data-active-imgsrc="summary_icon_u.png" class="one">
<a href="#firstPage" class="cmIcon" id="icon1"></a>
</li>
<li data-menuanchor="secondPage"
data-imgsrc="audi_risk_c.png"
data-active-imgsrc="audi_risk_u.png" class="two">
<a href="#secondPage" class="cmIcon" id="icon2"></a>
</li>
</ul>
You can use attribute selectors tag[attr]
like this: 您可以使用属性选择器
tag[attr]
如下所示:
$(document).ready(function() {
$('li[menuanchor]').click(function() {
var src = $(this).hasClass('active')
? $(this).data('activeImgsrc')
: $(this).data('imgsrc');
$("a", this).html('<img src="images/'+ src +'" />');
});
});
You should add the active
class to current clicked li
. 您应该将
active
类添加到当前单击的li
。
$('li > a').click(function() {
$('li').removeClass("active");
if($(this).parent().hasClass('active')) {
$(this).parent().addClass('active');
}
else {
$(this).parent().removeClass('active');
}
});
Now it will add the class 'active' on click of that item and removes the class 'active' when you click on the same li again. 现在,它会在点击该项目时添加“活动”类,并在再次单击相同的li时删除“活动”类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.