jQuery.append不適用于$(document).ready

這是對不隨 onClick 更改的父 div 的 toggleClass 的后續操作

在我的 HTML 布局中，我發現我需要#filters在記錄之后而不是之前生成 div ，因為我需要使用 PHP 為每個狀態構建按鈕。這給了我使用 jQuery.append將 #filters 移動到記錄上方的 #move-filters-here的想法。但是在我過濾一個狀態后，過濾器出現在記錄下方，并且.append無法將#filters 移動到記錄上方的 #move-filters-here。

是.append不是用（檔案）準備好了？

有沒有其他方法可以.append移動#filters？

是否.append需要在 Onclick 功能后再次“開火”？

小提琴：https : //jsfiddle.net/j3semt6h/10/

$(document).ready(function(){

$("#filters").append("#move-filters-here");

$('.state-button').on('click', function() {

  let _this = $(this);

  if (!_this.hasClass('active')) {

    $('.state-button.active, .record.active').removeClass('active');
    $('[data-state='   _this.data('state')   ']').addClass('active');

  }

});

});

  .record {
    display: none;
}

.state-button {
    border: 2px solid #c2c2c2;
    padding: 5px;
    border-radius: 5px;
    margin: 0 10px 0 10px;
}

.state-button.active {
    border-color: red;
}

.record.active {
    display: block;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="move-filters-here"></div>

<div class="record" data-state="AK">
    <h1 class="name">Customer 1</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
    </ul>
</div>
<div class="record" data-state="AR">
    <h1 class="name">Customer 2</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Mobile, <span class="state">AR</span></li>
    </ul>
</div>
<div class="record" data-state="CA">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Los Angeles <span class="state">CA</span></li>
    </ul>
</div>

<div class="record" data-state="AZ">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Flagstaff <span class="state">AZ</span></li>
    </ul>
</div>

<div class="record" data-state="UT">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: SLC <span class="state">UT</span></li>
    </ul>
</div>


<div id="filters">
<button class="state-button state-button-ak" data-state="AK">Alaska</button>
<button class="state-button state-button-ar" data-state="AR">Arkansas</button>
<button class="state-button state-button-ca" data-state="CA">California</button>
<button class="state-button state-button-ca" data-state="AZ">Arizona</button>
<button class="state-button state-button-ut" data-state="UT">Utah</button>
</div>

uj5u.com熱心網友回復：

我假設你append對appendTo. 現在，您正在將文字文本附加"#move-filters-here"到#filters元素的內容中。如果你改用它會起作用$('#filters').appendTo('#move-filters-here')。

$(document).ready(function(){

$("#filters").appendTo("#move-filters-here");

$('.state-button').on('click', function() {

  let _this = $(this);

  if (!_this.hasClass('active')) {

    $('.state-button.active, .record.active').removeClass('active');
    $('[data-state='   _this.data('state')   ']').addClass('active');

  }

});

});

  .record {
    display: none;
}

.state-button {
    border: 2px solid #c2c2c2;
    padding: 5px;
    border-radius: 5px;
    margin: 0 10px 0 10px;
}

.state-button.active {
    border-color: red;
}

.record.active {
    display: block;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="move-filters-here"></div>

<div class="record" data-state="AK">
    <h1 class="name">Customer 1</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
    </ul>
</div>
<div class="record" data-state="AR">
    <h1 class="name">Customer 2</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Mobile, <span class="state">AR</span></li>
    </ul>
</div>
<div class="record" data-state="CA">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Los Angeles <span class="state">CA</span></li>
    </ul>
</div>

<div class="record" data-state="AZ">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Flagstaff <span class="state">AZ</span></li>
    </ul>
</div>

<div class="record" data-state="UT">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: SLC <span class="state">UT</span></li>
    </ul>
</div>


<div id="filters">
<button class="state-button state-button-ak" data-state="AK">Alaska</button>
<button class="state-button state-button-ar" data-state="AR">Arkansas</button>
<button class="state-button state-button-ca" data-state="CA">California</button>
<button class="state-button state-button-ca" data-state="AZ">Arizona</button>
<button class="state-button state-button-ut" data-state="UT">Utah</button>
</div>

_{（或者，如果您append出于某種原因特別想使用它，則需要以相反的方式進行操作，并且實際上將要附加的內容參考為元素: $('#move-filters-here').append($('#filters'))。）}

uj5u.com熱心網友回復：

如果你想附加#filter到#move-filters-here你可以這樣做：

$("#move-filters-here").append($("#filters"));

如果你反過來做，你可以像這樣實作你的目標：

$("#filters").append("#move-filters-here");

標籤：javascript 查询

上一篇：如何在引導程式導航欄上觸發折疊事件？

下一篇：如何從jQuery中的滑塊獲取最小值和最大值？