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代码，请确保这些元素存在于您要分配新值的位置。希望这会奏效。

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

1 个答案: