切换DIV元素

Question

好的，这似乎是一个简单的问题，但我无法理解。

我的项目中有index.php和find.php。在index.php中，我显示了列表组项目的结果，如下所示

<div id="showDetails">

</div>

<div id="showList">
//All my list-group items are listed here
</div>

我的Ajax返回如下所示的列表组

function funcReadRecord() {
var readrecord1 = "readrecord1";
var sometext = $('#SNOW_INC').val();
$.ajax({
url : "find.php",
type : 'post' ,
data : { readrecord1 : readrecord1,
sometext : sometext } ,
success : function(data, status){
$('#showList').html(data);
}
});
}

现在，我以HTML链接的形式返回值，所以它看起来像这个

<div id="showList">
<a href="#">data 1</a>
<a href="#">data 2</a>
<a href="#">data 3</a>
</div>

我想要的是，当我单击data 1链接时，我希望显示填充了data 1的showDetailsdiv。然后，当我单击data 2链接时，它在showDetails中变为data 2。

我该怎么做？

可能我提供的信息还不够，但请随时询问，我会提供更多。

Answer 1

最简单的解决方案是为每个调用函数的项添加一个点击处理程序，并传递要显示的项的id。

在该函数中，获取给定项目的数据并显示它

function showData(which) {
console.log(`fetch data ${which} here and show it in the data div.`);
document.getElementById('showData').innerHTML = `show data ${which}`
return false; // prevents navigation on the clicked link
}

<div id="showList">
<a onclick="showData(1)" href="#">data 1</a>
<a onclick="showData(2)" href="#">data 2</a>
<a onclick="showData(3)" href="#">data 3</a>
</div>
<div id="showData"></div>