테스트 사이트 - 개발 중인 베타 버전입니다

jquery로 span의 text를 변경하는 부분에서 질문드립니다. 채택완료

kujira 6년 전 조회 3,346

일단 현제 제가 작업하고 있는 사이트는 

http://risette.sitecook.kr/ab-1158

여기 입니다.

 

위 사이트의 검색 select중 보증금을 클릭하면 드롭다운 메뉴가 나오고 

금액을 클릭하면 input과 최상위 메뉴 보증금(0원~0원) 부분에 클릭한 td의 rel이 적용이 

되어야 하는데요 작업한 소스는 아래와 같습니다.

 

스크립트

</p>

<p><script type="text/javascript">

/*통합검색 설정메뉴 js*/

$(function(){ 

    $('div.nice_head_menu ul li span').click(function () {

      $(this).toggleClass('up');

      $(this).next('div.sub_menu').toggleClass('active');

      $(this).parent().siblings().find('span').removeClass('up');

      $(this).parent().siblings().find('div.sub_menu').removeClass('active');

    });

})

    $(document).ready(function(){

        $(".nice_head_op").click(function(){

            //$(".nice_head_mn").show();

            $(".nice_head_xx").show();

            $(".nice_head_op").hide();

$(".nice_head_mn").css({"height":"auto"});

$(".nice_head_mn > p").show();

$(".nice_head_mn > table").show();

        });

        $(".nice_head_xx").click(function(){

            //$(".nice_head_mn").hide();

            $(".nice_head_xx").hide();

            $(".nice_head_op").show();

$(".nice_head_mn").css({"height":"23px"});

$(".nice_head_mn > p").hide();

$(".nice_head_mn > table").hide();

        });

    });</p>

<p>  

</script>

<script type="text/javascript">

$(function(){ 

   $('table.estate_range td').on('click', function(){

      var $menu_name = $(this).parents('div.menu_name');

      var $menu_down = $(this).parents('div.menu_down');

      var $menu_value = $(this).attr('rel');

      if($(this).index() > 0){

         $menu_down.find('input').last().val($menu_value).trigger('blur').trigger('change');

         $menu_name.find('span.estate_sell_price strong').last().html($menu_value).trigger('blur').trigger('change');

         $menu_name.find('span.estate_sell_price1 strong').last().html($menu_value).trigger('blur').trigger('change');

      } else{

         $menu_down.find('input').first().val($menu_value).trigger('blur').trigger('change');

         $menu_down.find('span.estate_sell_price strong').first().html($menu_value).trigger('blur').trigger('change');

         $menu_down.find('span.estate_sell_price1 strong').first().html($menu_value).trigger('blur').trigger('change');

//         $('.menu_down').hide();

      }

   });

})

</script></p>

<p>

 

html부분

</p>

<p><div style="display:inline-block; vertical-align:top;position:relative;z-index:10000000;" class="nice_head_mn menu_down"></p>

<p><div class="nice_head_op menu_name" rel="만원" style="background:#fff; line-height:25px;">보증금<span class="estate_sell_price1">(<strong>0</strong>만원~<strong>0</strong>만원)</span> ▼</div>

<div class="nice_head_xx menu_name" rel="만원" style="background:#fff; line-height:25px;">보증금<span class="estate_sell_price">(<strong>0</strong>만원~<strong>0</strong>만원)</span> ▲</div></p>

<p>

<p><input type="text" name="estate_deposit_min"> 만원 ~ <input type="text" name="estate_deposit_max"> 만원

</p>

<table class="estate_range">

    <tbody>

        <tr>

        <td rel="0">0만원</td>

        <td rel="0">0만원</td>

    </tr>

    <tr>

        <td rel="100">100만원</td>

        <td rel="100">100만원</td>

    </tr>

    <tr>

        <td rel="500">500만원</td>

        <td rel="500">500만원</td>

    </tr>

    <tr>

        <td rel="1000">1,000만원</td>

        <td rel="1000">1,000만원</td>

    </tr>

    <tr>

        <td rel="2000">2,000만원</td>

        <td rel="2000">2,000만원</td>

    </tr>

    <tr>

        <td rel="3000">3,000만원</td>

        <td rel="3000">3,000만원</td>

    </tr>

    <tr>

        <td rel="4000">4,000만원</td>

        <td rel="4000">4,000만원</td>

    </tr>

    <tr>

        <td rel="5000">5,000만원</td>

        <td rel="5000">5,000만원</td>

    </tr>

    <tr>

        <td rel="6000">6,000만원</td>

        <td rel="6000">6,000만원</td>

    </tr>

    <tr>

        <td rel="7000">7,000만원</td>

        <td rel="7000">7,000만원</td>

    </tr>

    <tr>

        <td rel="8000">8,000만원</td>

        <td rel="8000">8,000만원</td>

    </tr>

    <tr>

        <td rel="9000">9,000만원</td>

        <td rel="9000">9,000만원</td>

    </tr>

    <tr>

        <td rel="10000">10,000만원</td>

        <td rel="10000">10,000만원</td>

    </tr>

    <tr>

        <td rel="30000">30,000만원</td>

        <td rel="30000">30,000만원</td>

    </tr>

    <tr>

        <td rel="50000">50,000만원</td>

        <td rel="50000">50,000만원</td>

    </tr>

    <tr>

        <td rel="">무제한</td>

        <td rel="">무제한</td>

    </tr>

        </tbody>

</table></p>

<p></div></p>

<p>

 

문제는 보증금(0원~0원) 중에 앞에 0원에는 클릭한 값이 적용이되는데 뒤의 0원은 적용이 되질 않고 있습니다.....이것때문에 오늘 하루종일 고생이네요;;;;;;

방법 좀 알려주세요..ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

</p>

<p>$(function() {

    $(".estate_range td").on("click", function() {

        $("span.estate_sell_price strong:eq(" + $(this).index() + ")").text($(this).attr("rel"));

        $("input[name^='estate_deposit']:eq(" + $(this).index() + ")").val($(this).attr("rel"));

    });

});</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

k
kujira
6년 전
감사합니다!!! 이거 몇 줄 때문에 오늘 종일 뭐한건지...ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인