Question

我有一个标有＆＃39; View Capacities＆＃39;将标签更改为“隐藏容量”＃39;点击时。我试图让它在双击（切换关闭时）或用户点击窗口中的其他位置时更改回原始标签。

HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

只需添加一个焦点？！

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

Answer 2

使用focusout，dblclick和toggle()来实现此目标。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

请查看以下来源。如果您在单击按钮下方的文本时观察到它将切换回原始文本

 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>

在双击或未聚焦状态下更改文本？

3 个答案: