jQuery的，阿賈克斯，多個div

Question

我需要幫助使用Ajax顯示在彈出DIV的內容元素被點擊

<script type='text/javascript'> 
    $(document).ready(function() { 
    $('.myDiv').click(function() { 


     //Load a php file content from DB next to the clicked div 


     }); 
    }); 

</script> 

<div id="1" class="myDiv">Click me 1</div> 
<div id="2" class="myDiv">Click me 2</div> 
<div id="3" class="myDiv">Click me 3</div> 
<div id="4" class="myDiv">Click me 4</div> 

非常感謝

Answer 1

您可以使用像這樣的時候：

$(document).ready(function() { 
 
    $('.myDiv').click(function() { 
 
    // Uncomment the lines below to make the AJAX function work. For demo, I have just 
 
    // inserted a <span>. 
 
    // $.get("/url", function (res) { 
 
     $(this).append('<span>' + "This is AJAX Response." + '</span>'); 
 
    // }); 
 
    }); 
 
});

* {font-family: 'Segoe UI';} 
 
.myDiv {cursor: pointer; position: relative;} 
 
.myDiv span {position: absolute; margin-top: -15px; top: 50%; height: 20px; border: 1px solid #999; padding: 5px 10px; margin-left: 15px;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 

 
<div id="1" class="myDiv">Click me 1</div> 
 
<div id="2" class="myDiv">Click me 2</div> 
 
<div id="3" class="myDiv">Click me 3</div> 
 
<div id="4" class="myDiv">Click me 4</div>

更新

如果你想一個AJAX調用後刪除以前的<span> S，你可以用下面的腳本這樣做：

$(document).ready(function() { 
 
    $('.myDiv').click(function() { 
 
    // Uncomment the lines below to make the AJAX function work. For demo, I have just 
 
    // inserted a <span>. 
 
    // $.get("/url", function (res) { 
 
     $(".myDiv span").remove(); 
 
     $(this).append('<span onclick="$(this).remove(); event.stopPropagation(); return false;">' + "This is AJAX Response." + '</span>'); 
 
    // }); 
 
    }); 
 
});

* {font-family: 'Segoe UI';} 
 
.myDiv {cursor: pointer; position: relative;} 
 
.myDiv span {position: absolute; margin-top: -15px; top: 50%; height: 20px; border: 1px solid #999; padding: 5px 10px; margin-left: 15px;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 

 
<div id="1" class="myDiv">Click me 1</div> 
 
<div id="2" class="myDiv">Click me 2</div> 
 
<div id="3" class="myDiv">Click me 3</div> 
 
<div id="4" class="myDiv">Click me 4</div>