单击其按钮时从列表中获取内部 HTML

Question

我有一个我要列出的地点的表格，以及一个可以将地点单独添加到列表中的部分。单击该按钮时，它会将列表项的 innerHTML 更改为结果的 innerHTML。

每个结果都有自己的按钮，我需要该函数根据单击的按钮提取正确的 HTML。我还需要脚本根据上一个列表项是否已更改来切换它更改的列表项。

现在我只能获得将第一个列表项的 html 切换为表中第一个结果的 html 的功能。当单击这三个不同的按钮时，我需要能够将三个不同的项目添加到我的列表中。

到目前为止，这是我的代码。任何帮助将不胜感激。

    <div class="row" align="center">
    <h2>Create a Dilly</h2>
    <div class="row">
    <div class="col-xs-4">
    <img src="" id="placeaimg" width="80%"><br/>
    <p style='visibility: hidden;' id='placeaid'></p>
    <h3 id="placeaname">Place One Name</h3>
    <p id="placeaaddress">Place Address</p>
</div>

<div class="col-xs-4">
<img src="" id="placebimg" width="80%"><br/>
<p style='visibility: hidden;' id='placebid'></p>
<h3 id="placebname">Place Two Name</h3>
<p id="placebaddress">Place Address</p>
</div>

<div class="col-xs-4">
<img src="" id="placecimg" width="80%"><br/>
<p style='visibility: hidden;' id='placecid'></p>
<h3 id="placecname">Place Three Name</h3>
<p id="placecaddress">Place Address</p>
</div>
</div>
<br/>
<a class="btn btn-lg btn-warning" href="dilly.php">Create</a>
</div>

<script>

function addToDilly(){

    document.getElementById("placeaid").innerHTML = document.getElementById("placeid").innerHTML;
    document.getElementById("placeaname").innerHTML = document.getElementById("placename").innerHTML;
    document.getElementById("placeaaddress").innerHTML = document.getElementById("placeaddress").innerHTML;
    document.getElementById("placeaimg").src = document.getElementById("placeimg").src;
    }

</script>

 <table class="table table-striped">
<?php
$list = mysql_query("SELECT * FROM Places WHERE city='Houston' AND state='TX'");
while($row = mysql_fetch_object($list))
{
    echo "<tr>";
    echo "<td>";
    echo "<div class='row'>";
    echo "<div class='col-xs-4'>";
    echo "<p style='visibility: hidden;' id='placeid'>$row->id</p>";
    echo "<a href='place.php?id=$row->id'><img id='placeimg' src='$row->img' height='150px'></a><br/>";
    echo "</div>";
    echo "<div class='col-xs-8'>";
    echo "<h3 id='placename'><strong><a href='place.php?id=$row->id'>$row->name</a></strong></h3>";
    echo "<p id='placeaddress'>$row->address</p>";
    echo "</div>";
    echo "</div>";
    echo "<div class='row'>&nbsp;</div>";
    echo "<div class='row'>";
    echo "<a class='btn btn-lg btn-warning' onclick='addToDilly()'>Add To Dilly</a>";
    echo "</div>";
    echo "</td>";
    echo "</tr>";
}

?>
</table>

Answer 1

试试这个，但不要忘记调用 jquery 到你的页面

<script>
$(document).ready(function(){
addToDilly = function(uniqId){

    $("#placeaid").html( $("#"+uniqId+" .placeid").html() );
    $("#placeaname").html( $("#"+uniqId+" .placename").html() );
    $("#placeaaddress").html( $("#"+uniqId+" .placeaddress").html() );
    $("#placeaimg").attr("src" , $("#"+uniqId+" .placeimg").attr("src") );
    }

});

</script>

 <table class="table table-striped">
<?php
$list = mysql_query("SELECT * FROM Places WHERE city='Houston' AND state='TX'");
while($row = mysql_fetch_object($list))
{
    echo "<tr>";
    echo "<td id='row-$row->id'>"; // or some unique identifier to this row
    echo "<div class='row'>";
    echo "<div class='col-xs-4'>";
    echo "<p style='visibility: hidden;' class='placeid'>$row->id</p>";
    echo "<a href='place.php?id=$row->id'><img class='placeimg' src='$row->img' height='150px'></a><br/>";
    echo "</div>";
    echo "<div class='col-xs-8'>";
    echo "<h3 class='placename'><strong><a href='place.php?id=$row->id'>$row->name</a></strong></h3>";
    echo "<p class='placeaddress'>$row->address</p>";
    echo "</div>";
    echo "</div>";
    echo "<div class='row'>&nbsp;</div>";
    echo "<div class='row'>";
    echo "<a class='btn btn-lg btn-warning' onclick='addToDilly(\'row-$row->id\')'>Add To Dilly</a>";// again pass that unique id to function
    echo "</div>";
    echo "</td>";
    echo "</tr>";
}

?>
</table>

我只更改了您的 javascript 和 php 代码，请确保这些元素存在于您要分配新值的位置。 希望这会奏效。