동일한 값을 반환하는 jquery attr ("href")

다른 값을 포함하는 "Read More"(코드 하단)라는 두 개의 링크가 있습니다. 클릭하면 jquery 함수가 호출되어 demo_search.php로 전송됩니다. 문제는 어떤 링크를 클릭하든 동일한 값을 계속 유지한다는 것입니다. 내가동일한 값을 반환하는 jquery attr ("href")

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>

출처

2012-08-19 Norman

'. 분명히 당신의 문제를 해결한다면 왜'this'를 사용할 수 없습니까? –

이 함수에서 (this)를 사용하면 동일한 페이지/스크립트의 다른 함수에서 사용할 수 있습니까? – Norman

다른 기능에서 무엇을 사용합니까? –

($(".more_info")이 클래스의 모든 요소 모음을 반환합니다. 배열에서 특정 위치를 지정하지 않으면 추가 함수를 호출하면 항상이 컬렉션의 첫 번째 요소를 대상으로합니다.
두 가지 다른 "더 읽기"를 클릭하면 아래의 바이올린에서 searchStringA과 searchStringB 사이의 변경 사항을 비교하십시오.

this은 호출 된 함수이므로 JavaScript 객체이므로 .attr()은 jQuery 범위에 속합니다.

그래서 당신이 $(this)를 통해 jQuery를 객체에 this를 캐스팅해야하고 당신은 내가 할 <span>으로 <a> 태그를 원래의 코드를 제거하고 교체

$(this).attr("href")

호출 할 수있는 바이올린에 searchStringC을 참조하십시오 그것은 더 친한 클릭 :) 당신은 바이올린 here을 찾을 수 있습니다.
은 내가보기 엔 그 라인에서 오류를 관찰하기 위해 열린 콘솔을 실행하는 것이 좋습니다 : 항상 ** 처음 ** 선택한 요소의 해당 값을 반환 .attr`

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

출처

2012-08-19 11:57:27 yoshi

more_info 클래스가있는 요소가 여러 개 있습니다. 즉 선택기가 여러 요소를 생성합니다. 두 가지 요소의 href를 얻는 방법은 없습니다.

코드를 사용하는 이유는 한 번에 하나의 요소 만 클릭했기 때문입니다.

계속 하시겠습니까? 아니면 스팬에 more_info_1의 ID를주는 것과 같이 고유 한 선택기를 작성해야합니다.

또한 귀하의 의견을 이해하는 것 같습니다. 다음과 같이 작성하십시오 :

// 사용자가 입력 한 값 가져 오기 var searchString = ($ (". more_info"). attr ("href"));

쓰기를 원하십니까?

var search = $ (". 검색 _ 상자") .Val();

출처

2012-08-19 11:51:12 luqmaan

죄송합니다, pls 코멘트를 무시합니다. 나는 단순히 다른 누군가가 사용한 것을 사용했다. 검색 창에는 아무 것도 없습니다. 그 2 개의 연결 및 그들이 부르는 기능 만. – Norman

동일한 값을 반환하는 jquery attr ("href")

답변

관련 문제