通过onclick / javascript函数显示其他信息

Question

Hi I'm using javascript/php/html and at the moment I am displaying information on "Cars" when I click more information it displays "further information" on the same cars and hides the cars tab (all this information is taken from a database). 嗨，我使用的是javascript / php / html，当我单击更多信息时，此刻我在“汽车”上显示信息，它在同一汽车上显示“更多信息”并隐藏“汽车”选项卡（所有这些信息均取自数据库）。

But right now i'm trying to get it to display this information but for each "car" to have its own "further information" so when I click it, it just shows that cars information beneath it alongside the "car". 但是现在我正试图让它显示此信息，但对于每个“汽车”都有其自己的“更多信息”，因此，当我单击它时，它只是在“汽车”旁边显示其下方的汽车信息。 And when I click another car it hides the previous further information and displays the new one. 当我单击另一辆车时，它会隐藏先前的更多信息并显示新车。

Here is how I have done it, but it just displays the link, the link doesn't do anything... 这是我的操作方法，但是它仅显示链接，该链接不执行任何操作...

Javascript: Javascript：

<html>
<head>
<script type="text/javascript">

function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
            thelist[i].style.display = 'none';
        }
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }
//]]>  

</script>
</head>

PHP: PHP：

<body>

      <a href="#" onclick="toggle_visibility('list1');">
      <p>Car information</p>
    </a>
    <div id="list1" class="alist" style="display:none;">

<?php

$sql = "SELECT * from Car";
$result = mysql_query ($sql);
while ($details = mysql_fetch_array ($result))
    {
        $display = "<p>";
        $display.= $details["carMake"] . "&nbsp;";
        $display.= $details["carModel"];
        $display.="<a href='#' >More information</a>";
        $display.="</p>";
        echo ($display);
    }
?>
        </div>

    <a href="#" onclick="toggle_visibility('list2');">
      <p>More information</p>
    </a>

    <div id="list2" class="alist" style="display:none;">

<?php

$sql = "SELECT * from Car";
$result = mysql_query ($sql);
while ($details = mysql_fetch_array ($result))
    {
        $display = "<p>";
        $display.= $details["carMileage"];
        $display.= $details["carColour"];
        $display.= $details["carMOT"];
        $display.= "</p>";
        echo ($display);
    }
?>
    </div>
</body>    
</html>

Answer 1

Replace the first part of your function with this: 用以下内容替换函数的第一部分：

function toggle_visibility(evt, id) {
    var ev = evt || window.event;
    ev.preventDefault();
    ...
};

This will keep the link ( <a href="#"> ) from trying to load the # page (aka the current page). 这样可以避免链接（ <a href="#"> ）尝试加载#页面（也就是当前页面）。 Also need to change your HTML to use this on that link: 还需要更改您的HTML以在该链接上使用它：

<a href="#" onclick="toggle_visibility(event, 'list1');">

Or...you can just make this whole thing easy as hell and use jQuery. 或者...您可以像使用地狱般简单地使用jQuery。

通过onclick / javascript函数显示其他信息

问题描述

1 个解决方案

解决方案1
0 2013-12-22 16:37:17

通过onclick / javascript函数显示其他信息

问题描述

1 个解决方案

解决方案1 0 2013-12-22 16:37:17

解决方案1
0 2013-12-22 16:37:17