jQuery 축소 중복

Question

나는 jsFiddle이 드롭 다운 값을 기반으로하는 내용을 보여줍니다. jQuery를 어떻게 축소하여 각각의 '포트'에 대해 자신을 반복 할 필요가 없도록 만들 수 있습니까? 지금은 2 개의 '포트'를 만들었지 만 나머지는 채우는 데 시간이 걸릴 것입니다. 당신의 도움에 대한

http://jsfiddle.net/d4pvz51v/1/

$(document).ready(function() { 
$("select").change(function() { 
    $("select option:selected").each(function() { 
     if ($(this).attr("value") == "all") { 
      $(".auckland").hide(); 
      $(".tauranga").hide(); 
      $(".all").show(); 
     } 
     if ($(this).attr("value") == "auckland") { 
      $(".all").hide(); 
      $(".auckland").show(); 
      $(".tauranga").hide(); 

     } 
     if ($(this).attr("value") == "tauranga") { 
      $(".all").hide(); 
      $(".auckland").hide(); 
      $(".tauranga").show(); 

     } 
    }); 
}).change(); 

$('.auckland-link').click(function() { 
    $('select option:contains("Auckland")').prop('selected', true); 
    $('.auckland').show(); 
    $('.tauranga').hide(); 
    $(".all").hide(); 
}); 
$('.tauranga-link').click(function() { 
    $('select option:contains("Tauranga")').prop('selected', true); 
    $('.auckland').hide(); 
    $('.tauranga').show(); 
    $(".all").hide(); 
}); 


}); 

감사합니다!

Answer 1

각 옵션에 대해 서로 다른 처리기를 추가하거나

선택의 변화에 ​​

, 클래스 data 모든 요소를 ​​숨길 수 있습니다 연결하는 것은, 다음 클래스와 함께 요소를 표시하는 대신 선택한 값
링크에 대한 단일 클릭 처리기와 동일한 방법으로 모든 링크 요소에 공통 클래스를 할당 한 다음 data-* (이 경우 data-el)을 추가하여 대상 요소 클래스 이름을 지정할 수 있습니다. 클릭 핸들러에서 데이터 값을 읽고이를 select 요소의 값으로 설정 한 다음 적절한 데이터 요소 가시성을 설정하는 선택 변경 핸들러를 수동으로 트리거합니다.

$(document).ready(function() { 
 
    $("select").change(function() { 
 
    var $target = $('.' + $(this).val()).show(); 
 
    $('.data').not($target).hide(); 
 
    }).change(); 
 

 
    $('.data-link').click(function() { 
 
    var val = $(this).data('el') 
 
    $('select').val(val).change(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="ports section-padding text-center" id="ports"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <h1>PORTS OF OPERATION</h1> 
 

 
     <h3>Select a port to view information and contact details</h3> 
 

 
     <select class="choose"> 
 
      <option value="all">Select Port</option> 
 
      <option value="auckland">Port of Auckland</option> 
 
      <option value="tauranga">Port of Tauranga</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section class="all data section-padding"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="col-md-4"> 
 
      <h2>Port of Whangarei</h2> 
 

 
      <hr /> 
 
      <h2 class="data-link" data-el="auckland">Port of Auckland</h2> 
 

 
      <hr /> 
 
      <h2 class="data-link" data-el="tauranga">Port of Tauranga</h2> 
 

 
      <hr /> 
 
      <h2>Eastland Port</h2> 
 

 
      <hr /> 
 
      <h2>Port Taranaki</h2> 
 

 
      <hr /> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <h2>Port of Napier</h2> 
 

 
      <hr /> 
 
      <h2>Port Nelson</h2> 
 

 
      <hr /> 
 
      <h2>Centre Port Wellington</h2> 
 

 
      <hr /> 
 
      <h2>Port Malborough</h2> 
 

 
      <hr /> 
 
      <h2>Greymouth Port</h2> 
 
      <hr /> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <h2>Lyttleton Port</h2> 
 

 
      <hr /> 
 
      <h2>Primeport Tmaru</h2> 
 

 
      <hr /> 
 
      <h2>Port Otago</h2> 
 

 
      <hr /> 
 
      <h2>Southport</h2> 
 

 
      <hr /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section class="auckland data section-padding"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="col-md-4"> 
 
      <h2>Port Information</h2> 
 

 
      <p>Port of Auckland is centrally located on the west coast of the North Island and is one of New Zealand 's key import and export ports.</p> 
 
      <p>Port of Auckland offers nine fully serviced berths for a wide variety of cargoes and vessels. The maximum port draft is 12.5m, and for vessels in excess of 10m Dynamic Under Keel Clearance (DUKC) must be used.</p> 
 
      <p>Port of Auckland has the ability to handle a wide diversity of cargoes including all forms of bulk products (liquid and dry), containerised, and break-bulk products (general, refrigerated or palletised), and has specialist experience in the 
 
      handling of heavy lift and project cargoes. All wharves are supported by covered and open storage areas.</p> 
 

 
     </div> 
 
     <div class="col-md-4"> 
 
      <h2>Features</h2> 
 
      <p>An unusual feature of the port is that it has a beach within its breakwaters adjacent to its operational area. The popularity of Ngamotu Beach is testament to Port Taranaki's commitment to safe working practices and regard for the environment.</p> 
 
      <p>Another special feature of Port of Auckland is its "heavy lift" expertise. Auckland has a sophisticated engineering infrastructure, which evolved primarily as a result of development of the region's oil and gas industries. As the petrochemical 
 
      industries grew many oversized and heavy cargoes were imported and exported through Port Taranaki. Specialist know-how and facilities are available through Port of Auckland for the handling of extra heavy lifts.</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <hr /> 
 
      <img style="padding-top:40px;float:right;" src="img/map-taranaki.png" alt="" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section class="tauranga data section-padding"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="col-md-4"> 
 
      <h2>Port Tauranga</h2> 
 

 
      <p>Port of Auckland is centrally located on the west coast of the North Island and is one of New Zealand 's key import and export ports.</p> 
 
      <p>Port of Auckland offers nine fully serviced berths for a wide variety of cargoes and vessels. The maximum port draft is 12.5m, and for vessels in excess of 10m Dynamic Under Keel Clearance (DUKC) must be used.</p> 
 
      <p>Port of Auckland has the ability to handle a wide diversity of cargoes including all forms of bulk products (liquid and dry), containerised, and break-bulk products (general, refrigerated or palletised), and has specialist experience in the 
 
      handling of heavy lift and project cargoes. All wharves are supported by covered and open storage areas.</p> 
 

 
     </div> 
 
     <div class="col-md-4"> 
 
      <h2>Features</h2> 
 
      <p>An unusual feature of the port is that it has a beach within its breakwaters adjacent to its operational area. The popularity of Ngamotu Beach is testament to Port Taranaki's commitment to safe working practices and regard for the environment.</p> 
 
      <p>Another special feature of Port of Auckland is its "heavy lift" expertise. Auckland has a sophisticated engineering infrastructure, which evolved primarily as a result of development of the region's oil and gas industries. As the petrochemical 
 
      industries grew many oversized and heavy cargoes were imported and exported through Port Taranaki. Specialist know-how and facilities are available through Port of Auckland for the handling of extra heavy lifts.</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <hr /> 
 
      <img style="padding-top:40px;float:right;" src="img/map-taranaki.png" alt="" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

function manageState(hide1,hide2,show){ 
$(hide1).hide(); 
$(show).show(); 
$(hide2).hide(); 
} 

두 개의 필드를 숨기고 하나씩 표시하는 방법을 만듭니다. 각 조건에 맞는 특정 클래스를 전달하십시오. 이것은 당신이 파리에 숨어서 하나의 아이템을 보여주는 것처럼 보이기 때문에 작동합니다.

예 :

manageState('.all','.auckland','.tauranga')