0

我有两个名为“阅读更多”（代码底部）的链接，其中包含不同的值。单击时，他们调用一个 jquery 函数将其发送到 demo_search.php。问题是，无论我点击哪个链接，我都会得到相同的值。如果我要使用

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>
4

2 回答 2

0

您有多个元素，其类为 more_info。这意味着您的选择器会产生多个元素。你不可能得到两个不同元素的href。

使用此代码时代码起作用的原因是因为一次只有一个元素被点击。

要么你需要继续使用它，要么你需要编写一个唯一的选择器，比如给 span 一个 id 为 more_info_1。

此外，您的评论似乎没有任何意义。你写：

        // 获取用户输入的值 var searchString =($(".more_info").attr("href"));

你的意思是写吗？

        var search = $(".search_box").val();

于 2012-08-19T11:51:12.347 回答
0

($(".more_info")将返回您使用此类的所有元素的集合。除非您在数组中指定特定位置，否则调用其他函数将始终以该集合中的第一个元素为目标。当您单击两个不同的“阅读更多”时，
比较下面小提琴之间的变化searchStringA。searchStringB

this被调用的函数是一个 JavaScript 对象，因此它没有.attr()属于 jQuery 范围的方法。见searchStringC小提琴

所以你必须通过转换this为一个 jQuery 对象$(this)，然后你可以调用

$(this).attr("href")

我剥离了原始代码并将<a>标签替换<span>为使其更易于点击:) 你可以在这里找到小提琴。
我强烈建议它使用打开的控制台运行以观察行中的错误：

var searchStringC    = this.attr("href");
于 2012-08-19T11:57:27.167 回答