javascript show id由id问题隐藏div

时间:2013-02-08 14:45:46

标签: javascript html hide

我有一个包含div的列表,其中包含城市的信息。     我还有一个城市列表,所以访客可以点击一个城市,而且所有其他城市的div必须隐藏     如果访问者点击城市链接,隐藏的div必须再次显示。     到目前为止,我有一个工作功能,但它只适用于伦敦。如果我点击巴黎 - 没有错误,没有行动。     是什么导致这个?谢谢

已更新

<script language="javascript" type="text/javascript" charset="utf-8">      
function showHideDiv(city_id) {    
var divstyle = new String();    
divstyle = document.getElementById(city_id).style.visibility;    
if (divstyle.toLowerCase() == "visible" || divstyle == "") {     
document.getElementById("city_id").style.visibility = "hidden";    
document.getElementById("city_id").style.position = "absolute";             
}else{     
document.getElementById("city_id").style.visibility = "visible";    
document.getElementById("city_id").style.position = "relative";    
}    
}    
$(document).ready(function() {    
$(".city").click(function() {    
$(this).toggle();    
});    
});    
</script>    
<a href="#" id="<?php echo $city;?>" onclick="showHideDiv()" style="text-decoration:underline;">London | Paris</a></div>    
<div id="London">List of providers in London here as content</div>    
<div id="Paris">List of providers in Paris here as content</div>    

1 个答案:

答案 0 :(得分:2)

我认为这与你的Javascript中包含硬编码的城市这一事实有关。我假设(没有看到PHP)你在这里回应“伦敦”:

<?php echo $city;?>

因此,无论何时调用showHideDiv(),它都只能在伦敦调用,而不是在巴黎调用。您可能需要将id作为参数传入函数。

您可以考虑查看jQuery。这会让这很容易。

修改

使用您的代码,您将传递参数,如下所示:

function showHideDiv(city_id) {
    var divstyle = new String();
    divstyle = document.getElementById(city_id).style.visibility;
    // . . . Rest of your code. Replace all instances of <?php echo . . ?> with 
    // city_id.
}

然后,您必须在每个城市的onclick中指定城市。

使用jQuery,您可以执行以下操作:

$(document).ready(function() {
    $(".city").click(function() {
        $(this).toggle();
    });
});

然后您的HTML将是:

<div id="london" class="city">List of providers in London</div>
<div id="paris" class="city">List of providers in Paris</div>