在雙擊或未聚焦的狀態下更改文本？

我有一個標籤爲「視圖容量」的下拉菜單，當點擊時將標籤更改爲「隱藏容量」。我試圖讓它在雙擊時（切換關閉時）或當用戶在窗口中的其他位置單擊時變回原始標籤。在雙擊或未聚焦的狀態下更改文本？

HTML：

//JQUERY: 
 

 
$('.FullLengthDropdown').focus(function(){ 
 
    $('.ViewCapacitiesTxt').text("HIDE CAPACITIES"); 
 
});

<button class="FullLengthDropdown btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown"> 
 
    <div> 
 
    <span class="ViewCapacitiesTxt">VIEW CAPACITIES</span> 
 
    </div> 
 
</button> 
 

 
<table class="dropdown-menu"> 
 
    <tr> 
 
    <th>SPACE</th> 
 
    <th>RECEPTION</th> 
 
    <th>THEATRE</th> 
 
    <th>BANQUETING</th> 
 
    <th>CABARET</th> 
 
    <th>BOARDROOM</th> 
 
    </tr> 
 
</table>

來源

2016-10-19 Ramish Mian

我試圖創建的jsfiddle但你的代碼是不工作 – brk

你說你想要這個在點擊事件中激活，但是您正在激活焦點事件？ –

之前的位置，請檢查您的代碼中的錯誤（如和 jogoe

只需添加一個焦點了？

$('.FullLengthDropdown').focusout(function(){ 
    $('.ViewCapacitiesTxt').text("VIEW CAPACITIES"); 
});

來源

2016-10-19 09:47:57 ManuManfred

專注..正是我一直在尋找！謝謝 –

@RamishMian如果你接受這個答案，讓它'接受' – himyata

使用focusout，dblclick和toggle()實現這一目標。

//JQUERY: 
 

 
$('.FullLengthDropdown').on('focusout dblclick', function(){ 
 
    $('.ViewCapacitiesTxt span').toggle() 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="FullLengthDropdown btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown"> 
 
    <div> 
 
    <span class="ViewCapacitiesTxt"> 
 
     <span>VIEW CAPACITIES</span> 
 
     <span style="display:none">HIDE CAPACITIES</span> 
 
    </span> 
 
    </div> 
 
</button> 
 

 
<table class="dropdown-menu"> 
 
    <tr> 
 
    <th>SPACE</th> 
 
    <th>RECEPTION</th> 
 
    <th>THEATRE</th> 
 
    <th>BANQUETING</th> 
 
    <th>CABARET</th> 
 
    <th>BOARDROOM</th> 
 
    </tr> 
 
</table>

來源

2016-10-19 11:18:23

請檢查以下源。如果你當你點擊下面的按鈕文本觀察它會切換回原來的文本

function toggleText() { 
 
       var toggleText = $('.ViewCapacitiesTxt').attr("data-toggle-text"); 
 
       $('.ViewCapacitiesTxt').attr("data-toggle-text", $('.ViewCapacitiesTxt').text()); 
 
       $('.ViewCapacitiesTxt').text(toggleText); 
 
      } 
 
      $('.FullLengthDropdown').click(function() { 
 
       toggleText(); 
 
      }); 
 
      $(document).ready(function() { 
 
       $(document).click(function (e) { 
 
        if (!$(e.target).hasClass("FullLengthDropdown")) { 
 
         if ($('.ViewCapacitiesTxt').text() != $('.ViewCapacitiesTxt').attr("data-orginal-text")) { 
 
          toggleText(); 
 
         } 
 
        } 
 
       }); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <button class="FullLengthDropdown btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown"> 
 
      <div> 
 
       <span data-toggle-text="HIDE CAPACITIES" 
 
         data-orginal-text="VIEW CAPACITIES" 
 
         class="ViewCapacitiesTxt">VIEW CAPACITIES</span> 
 
      </div> 
 
     </button> 
 

 
     <table class="dropdown-menu"> 
 
      <tr> 
 
       <th>SPACE</th> 
 
       <th>RECEPTION</th> 
 
       <th>THEATRE</th> 
 
       <th>BANQUETING</th> 
 
       <th>CABARET</th> 
 
       <th>BOARDROOM</th> 
 
      </tr> 
 
     </table>

來源

2016-10-19 11:35:39

在雙擊或未聚焦的狀態下更改文本？

回答

相關問題