切换时锚点没有文本更改,请给我一些建议
目录:
<a href="#" onclick="javascript:showHide('flight_<?php echo $flightlist->id ?>'); class="fnt-size12">+Flight Details</a>
<div id="flight_<?php echo $flightlist->id; ?>" class="minDetailBox addmarginB10 borT">
<div class="col1">
<div class="padding">
<div class="airLogo"> <span class="airSprites LS2"> </span>
<p>JET Lite</p>
</div>
</div>
</div>
</div>
脚本:
function showHide(id) {
var minDetails = document.getElementById(id);
$(minDetails).toggle('slow');
($(this).text() === "+Flight Details") ? $(this).text("-Flight Details") : $(this).text("+Flight Details");
return false;
}
像
onClick="return showHide('flight1',this)"
一样传递你的element
function showHide(id,element) {
var minDetails = document.getElementById(id);
$(minDetails).toggle('slow');
($(element).text() === "+Flight Details") ?
$(element).text("-Flight Details") :
$(element).text("+Flight Details");
return false;
}
你可以试试这样的东西
<a href="#" onClick="return showHide('flight1', this);" class="fnt-size12">+Flight Details</a>
function showHide(id, link) {
$('#' + id).toggle('slow');
($(link).text() === "+Flight Details") ? $(link).text("-Flight Details") : $(link).text("+Flight Details");
return false;
}
<a href="#" id="flight1" class="toggle fnt-size12">+Flight Details</a>
jQuery('a.toggle')
.click(function(e) {
var id = jQuery(this).attr('id');
jQuery('#'+id).toggle('slow');
if(jQuery('#'+id).css('display') == 'none') {
jQuery(this).html("+Flight Details");
} else {
jQuery(this).html("-Flight Details");
}
e.preventDefault();
});
您可以按如下方式执行此操作,
j查询代码
$(function()
{
$('div[id^="flight_"]').hide();
$(document).on('click','.fnt-size12',function(e)
{
e.preventDefault();
var $that = $(this);
$(this).next('#flight1').toggle();
if($that.html() == '+Flight Details') {
$that.html('-Flight Details');
} else {
$that.html('+Flight Details');
}
})
});
您的网页
<a href="#" class="fnt-size12">+Flight Details</a>
<div id="flight1" class="minDetailBox addmarginB10 borT">
<div class="col1">
<div class="padding">
<div class="airLogo"> <span class="airSprites LS2"> </span>
<p>JET Lite</p>
</div>
</div>
</div>
</div>
看到我已经修改了您的 HTML code
并添加了新的几行jQuery
代码。