我的意图是显示一个 slidediv在显示和隐藏的链接上，但是当我实现 slidediv以另一种形式，或<div>元素，工具提示 div 不起作用。
JavaScript:
<script type="text/javascript">
$(function() {
$('.showhide').click(function() {
$(".slidediv").slideToggle();
});
});
</script>
CSS:
<style type="text/css">
.slidediv{
width: 30%;
padding:20px;
background:#EB5E00;
color:#fff;
margin-top:10px;
border-bottom:5px solid #FFF;
}
</style>
PHP 和 HTML:
echo '<a href=# alt=Image Tooltip rel=tooltip content="<div class=td2><div id=imagcon><img src=img/1.jpg class=tooltip-image/></div><div id=con>'.$friendList['BedRooms'].' bhk </div><div id=con>'.$friendList['property_type'].'</div><div id=con>Area:'.$friendList['CoveredArea'].'</div><div id=con> '.$friendList['Type_cust'].' :'.$friendList['FirstName'].' '.$friendList['LastName'].' </div> <div id=con>
<a href=# > View All Details </a>
</div>
<br/>
<div id=con> <a href=# class=showhide>';
echo " <img src='Dealer/images/email_send.png' style='width:22px;height:22px' />";
echo ' Contact Advertiser </a> </div>';
echo "<div class='slidediv'>
<div id='lgndiv' class='div-0-ryh' >
<div class='div-1-ryh'>
<form method='post' onsubmit='' action='' target='_blank' class='form-3-ryh'>
<div class='div-4-ryh '>
<table cellpadding='2' cellspacing='0' border='0' class='table-5-ryh'>
<colgroup>
</colgroup>
<tbody class='table-5-ryh'>
<tr class='tr-8-ryh'>
<td class='td-9-ryh'>
<div class='div-10-ryh'>
<span class='span-11-ryh'>Your Name:</span>
<input name='name' valtype='name' required='true' class='input-12-ryh' style='background-color:#FFFFFF'>
</div>
<div class='div-10-ryh'>
<span class='span-14-ryh'>Email:</span>
<input name='email' valtype='email' required='true' class='input-15-ryh' style='background-color:#FFFFFF'>
</div>
<div class='div-16-ryh'>
<span class='span-17-ryh'>Phone:</span>
<input name='phone' required='true' maxlength='13' valtype='phmob' class='input-18-ryh' style='background-color:#FFFFFF'>
</div>
</td>
</tr>
<tr class='tr-19-ryh'>
<td colspan='2' class='td-20-ryh'>
<span id='text5'>This is for verification purpose and will be asked only once.</span>
</td>
</tr>
<tr class='tr-22-ryh'>
<td>
<span id='text5'>By clicking this you agree to </span><a target='_blank' href='/load/Company/termsconditions' class='a-25-ryh'>Terms and conditions.</a>
</td>
</tr>
<tr>
<td colspan='2' class='td-27-ryh'>
<div id='submit_ViewPhnoD11255903' class='div-28-ryh'>
<span id='savedetail_ViewPhno_D11255903'>
<input type='' value='' class='input-30-ryh'>
</span>
<span class='span-31-ryh'>
<a href='javascript:void(0);' onclick='jsui.hideCurLyr();pg.closeModalLayer(); return false;' class='a-25-ryh'>Cancel</a>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
<div class='div-52-ryh'></div>
</div>
</div>
最佳答案
看起来您的 JavaScript 需要在回显此 HTML 后添加到页面中。你做到了吗？
另外，似乎返回了一些无效的 HTML。但是，这些错误不应影响 JavaScript。
$bedrooms = $friendList['BedRooms'];
$propertyType = $friendList['property_type']
$coveredArea = $friendList['CoveredArea'];
$custType = $friendList['Type_cust'];
$fullName = $friendList['FirstName'].' '.$friendList['LastName'];
// It would appear that this html is broken
// Try fixing this first line and see if that resolve the issue
echo '<a href="#" alt="Image Tooltip" rel="tooltip" content=""></a>';
echo '<div class="td2">';
echo '<div id="imagcon">';
echo '<img src="img/1.jpg" class="tooltip-image" />';
echo '</div>';
// As a matter of technicality, don't use the same ID more than once
echo '<div id="con">'.$bedrooms.' bhk </div>';
echo '<div id="con">'.$propertyType.'</div>';
echo '<div id="con">Area:'.$coveredArea.'</div>';
echo '<div id="con"> '.$custType.' :'.$fullNName.' </div>';
echo '<div id="con"><a href="#"> View All Details </a></div>';
echo '<br/>';
echo '<div id="con">';
echo '<a href="#" class="showhide">';
echo '<img src="Dealer/images/email_send.png" style="width:22px;height:22px" /> Contact Advertiser ';
echo '</a>';
echo '</div>';
echo '<div class="slidediv">';
echo '<div id="lgndiv" class="div-0-ryh">';
echo '<div class="div-1-ryh">';
echo '<form method="post" onsubmit="" action="" target="_blank" class="form-3-ryh">';
echo '<div class="div-4-ryh">';
echo '<table cellpadding="2" cellspacing="0" border="0" class="table-5-ryh">';
echo '<colgroup></colgroup>';
echo '<tbody class="table-5-ryh">';
echo '... rest of the form ...';
echo '</tbody>';
echo '</table>';
echo '</div>';
echo '</form>';
echo '<div class="div-52-ryh"></div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
如果您的 JavaScript 在回显此 html 之后加载或呈现，那么我建议您也像这样添加它:
<script type="text/javascript">
// This should be equivalent to document.ready()
$(function() {
// See if your element exists or not
if($('.showhide').length){
$('.showhide').click(function() {
$(".slidediv").slideToggle();
return false;
});
} else {
// If you have a console in your browser (not everyone does)
// and calling console.log() may generate errors on older IEs
if(window.console){
console.log('.showhide was not found');
}
}
});
</script>
关于javascript - JQuery:切换问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19634517/