異なる値を含む「続きを読む」(コードの下部) という 2 つのリンクがあります。クリックすると、demo_search.php に送信する jquery 関数が呼び出されます。問題は、どのリンクをクリックしても、同じ値を取得し続けることです。私が使うとしたら
var searchString = ($(this).attr("href"))
それ以外の
var searchString = ($(".more_info").attr("href"))
物事はうまくいきます。でも使えない(this)
。これを解決するには?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Search</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript" src="http://localhost/dev/ajax/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".more_info").click(function() {
// getting the value that user typed
var searchString =($(".more_info").attr("href"));
// form the queryString
var data = 'search='+ searchString;
var imgLoad = '<img src="loading.gif">';
// if searchString is not empty
if(searchString) {
alert (searchString);
// ajax call
$.ajax({
type: "GET",
url: "demo_search.php",
data: searchString,
beforeSend: function(html) { // this happens before actual call
$(".word").html(searchString);
$(".imgProgress").html(imgLoad);
},
success: function(page_data){ // this happens after we get results
$("#results").empty();
$("#results").fadeIn(200);
$("#results").append(page_data);
$(".imgProgress").empty();
},
});
}
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div style="margin:20px auto; text-align: center;">
<form method="post">
<input type="text" name="search" id="search_box" class='search_box'/>
<input type="submit" value="Search" class="search_button" /><br />
</form>
</div>
<div>
<div id="searchresults">Search results for <span class="word"></span><span class="imgProgress"></span></div>
<div id="results" class="update" style="display:none;"><ul></ul>
</div>
<div>
<a href="search=sony&offset=20&lang=en" class="more_info">Read More</a>
<a href="search=pioneer&offset=30&lang=en" class="more_info">Read More</a>
</div>
</div>
</div>
</body>
</html>