替換選擇框選項中的某些文本

Question

我有一個“顯示/隱藏”選擇框（ JS Fiddle ） ，它從選定的選項中獲取類名，並隱藏相應的無序列表項。 當單擊一個選項時，我不知所措要使用replace()將文本Hide替換為Show ，反之亦然（例如，單擊時Show Month應該變成Hide Month。）

當我單擊全部顯示選項時，我還想將所有選項都更改回Hide 。

當我使用findoption.replace('Hide','Show'); 我收到了這個Uncaught TypeError: undefined is not a function錯誤。 誰能告訴我該怎么做？ 任何幫助，將不勝感激。

JS代碼：

$(document).ready(function(){
    $(".showhidelist").change(function() {
        $this = $(this);
        var findoption = $this.find('option:selected');
        var selected = findoption.data('hide');
        var show_hide_li = $("."+selected);
        if (show_hide_li.css("display") == "none") {
            show_hide_li.show(); 
           /* Want to Replace the text Hide with Show */
        }
        else if (show_hide_li.is(':visible')){
            show_hide_li.hide();
          /* Want to Replace the text Show with Hide */
        }
        else if (selected == "Reset") {
            $('li').show();
         /* Want to Replace the text Show with Hide if it's true */
        }
    });

});

HTML

<select class="showhidelist">
    <option data-hide="Reset">Show All</option>
    <option data-hide="year">Hide Year</option>
    <option data-hide="month">Hide Month</option>
    <option data-hide="day">Hide Day</option>
</select>

<ul id="list">
    <li class="year">2004</li>
    <li class="month">Feb</li>
    <li class="day">17</li>

<ul>

Answer 1

您沒有將text()替換，而是可以使用.text（）必須替換的函數。

findoption.text(function(_,text){ return text.replace('Hide', 'Show')});

根據您的需要更改單詞“隱藏”或“顯示”。

更新：

我在里海評論中讀到，您現在遇到的問題是您無法重新單擊所單擊的選項，請嘗試重新啟動“選擇第一個選項”，例如：

$(".showhidelist").prop('selectedIndex',0);

Answer 2

findoption返回一個jquery數組，因此您需要訪問那里的第一個元素。 我認為以下內容將滿足您的需求（就所選元素而言）。

findoption[0].innerHTML = findoption[0].innerHTML.replace('Show','Hide');

我不確定您實際上在做什么-這有點古怪，因為您擁有全部的顯示/隱藏功能，因此您必須瀏覽整個列表才能更新它們。 另外-重新選擇已選擇的事件時，不會得到選定的事件。

UPDATE：這包括如何使用each()更新列表中的所有項目

jsfiddle： http : //jsfiddle.net/hk4wg/15/