单击按钮时获取列表中的内部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代码，请确保这些元素存在，你要指定新值。 希望这会起作用。