php - 切换时锚的文本没有变化

Question

切换时锚的文本没有变化，请给我一些建议

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">&nbsp;</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;
}

Answer 1

通过你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;
}

Answer 2

你可以试试这样的

<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;
}

Answer 3

<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();
    });

Answer 4

您可以按以下方式执行此操作，

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">&nbsp;</span>
            <p>JET Lite</p>
         </div>
      </div>
   </div>
</div>

看到我已经修改了你的 HTMLcode并添加了新的几行jQuery代码。