Question

我有两个名为“Read More”的链接（代码底部）包含不同的值。单击时，它们调用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>

Answer 1

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

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

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

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

//获取用户输入的值 var searchString =（$（“。more_info”）。attr（“href”））;

你的意思是写吗？

var search = $（“。search_box”）。val（）;

Answer 2

($(".more_info")将返回此类的所有元素的集合。除非您在数组中指定特定位置，否则调用其他函数将始终以此集合中的第一个元素为目标 当您点击两个不同的＆＃34;阅读更多＆＃34;

时，比较下面小提琴中searchStringA和searchStringB之间的变化被调用函数的

this是一个JavaScript对象，因此它没有属于jQuery范围的方法.attr()。 请参阅小提琴中的searchStringC

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

$(this).attr("href")

我删除了原始代码并将<a>代码替换为<span>以使其更加便于点击:)您可以找到小提琴here。
我强烈建议使用开放式控制台运行以观察行中的错误：

var searchStringC    = this.attr("href");

jquery attr（“href”）返回相同的值

2 个答案: