0

html は、.offer_miliage の場所に基づいてアイテムを表示したい

<div class="offer_list clearfix">
    <div class="offer_item clearfix">
        <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_01.jpg" alt=""/></a>

        </div>
        <div class="offer_aside">
                <h2><a href="offers-details.html">Project 1</a></h2>

            <div class="offer_descr">
                <p>content description</p>
            </div>
            <div class="offer_data">
                <div class="offer_price">32.690</div> <span class="offer_miliage">Nungambakkam</span>

            </div>
        </div>
    </div>
    <div class="offer_item clearfix">
        <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_02.jpg" alt=""></a>

        </div>
        <div class="offer_aside">
                <h2><a href="offers-details.html">Project 2</a></h2>

            <div class="offer_descr">
                <p>content description</p>
            </div>
            <div class="offer_data">
                <div class="offer_price">56.300</div> <span class="offer_miliage">Choolaimedu</span>

            </div>
        </div>
    </div>
    <div class="offer_item clearfix">
        <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_03.jpg" alt=""></a>

        </div>
        <div class="offer_aside">
                <h2><a href="offers-details.html">Project 3</a></h2>

            <div class="offer_descr">
                <p>content description</p>
            </div>
            <div class="offer_data">
                <div class="offer_price">47.000</div> <span class="offer_miliage">T Nangar</span> 
            </div>
        </div>
    </div>
    <div class="offer_item clearfix">
        <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_04.jpg" alt=""></a>

        </div>
        <div class="offer_aside">
                <h2><a href="offers-details.html">Project 4</a></h2>

            <div class="offer_descr">
                <p>content description</p>
            </div>
            <div class="offer_data">
                <div class="offer_price">26.750</div> <span class="offer_miliage">Pallavaram</span>

            </div>
        </div>
    </div>
    <div class="offer_item clearfix">
        <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_05.jpg" alt=""></a>

        </div>
        <div class="offer_aside">
                <h2><a href="offers-details.html">Project 5</a></h2>

            <div class="offer_descr">
                <p>content description</p>
            </div>
            <div class="offer_data">
                <div class="offer_price">33.300</div> <span class="offer_miliage">Tambaram</span> 
            </div>
        </div>
    </div>
    <div class="offer_item clearfix">
        <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_06.jpg" alt=""></a>

        </div>
        <div class="offer_aside">
                <h2><a href="offers-details.html">Project 6</a></h2>

            <div class="offer_descr">
                <p>content description</p>
            </div>
            <div class="offer_data">
                <div class="offer_price">44.300</div> <span class="offer_miliage">fort</span> 
            </div>
        </div>
    </div>
    <div class="offer_item clearfix">
        <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_07.jpg" alt=""></a>

        </div>
        <div class="offer_aside">
                <h2><a href="offers-details.html">Project 7</a></h2>

            <div class="offer_descr">
                <p>content description</p>
            </div>
            <div class="offer_data">
                <div class="offer_price">48.500</div> <span class="offer_miliage">Fort</span> 
            </div>
        </div>
    </div>
    <div class="offer_item clearfix">
        <div class="offer_image"><a href="offers-details.html"><img src="images/temp/prod_img_08.jpg" alt=""></a>

        </div>
        <div class="offer_aside">
                <h2><a href="offers-details.html">Project 8</a></h2>

            <div class="offer_descr">
                <p>content description</p>
            </div>
            <div class="offer_data">
                <div class="offer_price">63.300</div> <span class="offer_miliage">Nungambakkam</span>

            </div>
        </div>
    </div>
</div>
<div class="widget-container widget_adv_filter">
        <h3 class="widget-title">ADJUST SEARCH RESULTS</h3>

    <form action="#" method="get" class="side_form">
        <div class="row field_select" style="z-index:8">
            <label class="label_title">Location:</label>
            <select class="select_styled white_select" name="car_year" id='select'>
                <option value="1">Pallavaram</option>
                <option value="2">T Nagar</option>
                <option value="3">Nungambakkam</option>
                <option value="4">Choolaimedu</option>
                <option value="5">Fort</option>
            </select>
        </div>
        <div class="row rowSubmit"> <span class="btn btn_search"><input type="submit" value="SEARCH" onClick="go_button();"></span>

        </div>

検索ボタンをクリックしたときに同じ場所にあるアイテムを表示する方法。Java スクリプトを開始しましたが、先に進むことができませんでした。ここにJavaスクリプトがあります

<script type="text/javascript">
  function go_button(){
var loc=document.getElementByClassName('offer_miliage')[0].innerText;
if(document.getElementById('select').value==1){
//what to write to update .offer_list with .offer_item that
//have .offer_miliage text pallavaram
                            }

                        };
</script>

友人、このスクリプトの何が問題なのか教えてください

      function go_button(){
      if(document.getElementById('select').value==1){
    $(function() {
    $(".offer_item").search(function(a) {
        // Find the location name from element
        var priceAText = $(a).find(".offer_miliage").text();
        // Return the result
        if(priceAText=="Pallavaram"){return true;}
    }).each(function() {
     // Add all the elements back into the parent, in order
          $(this).appendTo(".offer_list");
        });
    });
}
    };
4

1 に答える 1

0

jQuery を使用した実際の例: http://jsfiddle.net/9VQRt/ (見つかったデータを赤い背景で強調表示します)。

$('body').on('click', '.search_button', function() {
   var offerCollection = $('.offer_miliage');
    $.each(offerCollection, function(ind, val) {
        if($("#select option:selected").text() == val.innerHTML) {
            $(this).addClass('red_bg'); 
        }
    });
});
于 2013-07-26T09:06:33.760 に答える