Нет текстового изменения привязки при переключении
Нет изменения текста привязки при переключении, пожалуйста, дайте мне несколько советов
Html:
<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;
}
4 ответа
Решение
Передай свой element
так же как onClick="return showHide('flight1',this)"
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;
}
Вы можете сделать это, как показано ниже,
Код JQuery
$(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');
}
})
});
Ваш HTML
<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
код.
<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();
});
Вы можете попробовать что-то вроде этого
<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;
}