0

異なる値を含む「続きを読む」(コードの下部) という 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>
4

2 に答える 2

0

more_info のクラスを持つ複数の要素があります。これは、セレクターが複数の要素を生成することを意味します。2 つの異なる要素の href を取得する方法はありません。

これを使用するとコードが機能する理由は、一度に 1 つの要素しかクリックされないためです。

これを引き続き使用するか、スパンに more_info_1 の ID を与えるなど、一意のセレクターを作成する必要があります。

さらに、あなたのコメントは意味をなさないようです。あなたが書く：

        // ユーザーが入力した値を取得 var searchString =($(".more_info").attr("href"));

書くということですか？

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

于 2012-08-19T11:51:12.347 に答える
0

($(".more_info")このクラスのすべての要素のコレクションを返します。配列内の特定の位置を指定しない限り、さらに関数を呼び出すと、常にこのコレクションの最初の要素がターゲットになります。2 つの異なる「続きを読む」をクリックしたときの と 下のフィドルの
変化を比較してください。searchStringAsearchStringB

this.attr()呼び出された関数の は JavaScript オブジェクトであるため、jQuery スコープに属するメソッドがありません。フィドルを見るsearchStringC

thisしたがって、経由してjQueryオブジェクトにキャストする$(this)必要があり、その後呼び出すことができます

$(this).attr("href")

元のコードを取り除き、<a>タグをに置き換えて、<span>クリックしやすくしました :) フィドルはこちらにあります。
行のエラーを観察するために、開いているコンソールで実行することを強くお勧めします。

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