編碼糟糕的JQuery：命名的依賴關係

我有這個標記編碼糟糕的JQuery：命名的依賴關係

<div id="holiday-details-nav"> 
       <ul> 
        <li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li> 
        <li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li> 
        <li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li> 
        <li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>       
        <li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li> 
       </ul> 
      </div>

隱藏在這些選項卡中的內容的表現是由開始這樣

一些jQuery代碼來控制頁面上的一些標籤

$(document).ready(function() { 
    // Hide all tabs apart from the overview 
    $('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide(); 
    $('#holiday-details-tabs div:#tab-holidaydetails-rates').hide(); 
    $('#holiday-details-tabs div:#tab-holidaydetails-information').hide(); 
    $('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide(); 
    ...

問題是，如果我添加，刪除或重命名標籤（就像我剛剛完成），那麼我必須更改所有這些代碼。我想要的是添加，重命名或刪除儘可能多的選項卡，但不必修改此JQuery代碼。

我並不是在尋找某人爲我編寫解決方案，而是想開始討論可用於避免這種命名依賴的工具，技術等。

編輯

我也有被點擊選項卡時，該位醜陋的。

$('#holiday-details-nav ul li a').click(function() { 
    // Remove active class from all links 
    $('#holiday-details-nav ul li').removeClass('active'); 
    //Set clicked link class to active 
    $(this).parent().addClass('active'); 
    // Set variable currentTab to value of href attribute of clicked link 
    var currentTab = $(this).attr('href'); 
    // Hide all tabs 
    $('#holidaydetails-description-imagecontainer').hide(); 
    $('#holiday-details-tabs div:#tab-holidaydetails-overview').hide(); 
    $('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide(); 
    $('#holiday-details-tabs div:#tab-holidaydetails-rates').hide(); 
    $('#holiday-details-tabs div:#tab-holidaydetails-information').hide(); 
    $('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide(); 

    $('#holiday-details-bottom').show(); 
    $('#holiday-details-left-booknow').show(); 

    // Show div with id equal to variable currentTab 
    $(currentTab).show(); 

    $('#holidaydetails-description-imagecontainer').show(); 

    return false; 
});

感謝，

薩欽

來源

2012-09-14 Sachin Kainth

你可以指定一個共同 CSS類，說tab，每li除了概述，然後用一個jQuery類選擇隱藏所有這些。例如：

<div id="holiday-details-nav"> 
    <ul> 
    <li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li> 
    <li><a class="tab holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li> 
    <li><a class="tab holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li> 
    <li><a class="tab holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>       
    <li><a class="tab holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li> 
    </ul> 
</div>

然後，以隱藏除概述每個選項卡：

$("holiday-details-nav .tab").hide();

或者周圍的其他方法，那就是，添加特定的類來概述，並隱藏所有其他選項卡：

<div id="holiday-details-nav"> 
    <ul> 
    <li><a class="overview holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li> 
    <li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li> 
    <li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li> 
    <li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>       
    <li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li> 
    </ul> 
</div>

然後，隱藏，選擇所有選項卡，並使用.not()排除概述：

$("#holiday-details-nav a").not(".overview").hide();

來源

2012-09-14 16:37:29

但是，然後點擊我有更多的醜 - 請參閱上面的編輯。 –

爲什麼不使用標題標籤進行選擇而不是添加更多類？標題標籤已經存在。 – Austin

無需添加額外的類，並且這仍然是硬編碼的東西，所以如果OP對標籤列表做任何更改，OP仍然需要更新代碼... – Ian

當處理選項卡時，特別是在設置中（其中href屬性具有與其相關的div的標識）時，不需要對任何內容進行硬編碼，使用title屬性或使用任何其他類。看看這個：

http://jsfiddle.net/FAM2s/2/

所做的只是找到的所有選項卡詳細的div並隱藏他們，然後只顯示一個涉及到什麼只是點擊。

只要您爲鏈接設置正確的href屬性，並使用這些ID設置相應的div，無論您想要添加/刪除多少個標籤，它都可以工作。

來源

2012-09-14 17:03:50 Ian

編碼糟糕的JQuery：命名的依賴關係

回答

相關問題