javascript - 有没有办法在使用 AJAX 的父级之前在 div 中加载隐藏的 div？

Question

我有一个 dropdown 菜单，它根据选择在页面上显示/隐藏 divs。我还从前一页上的链接传递参数以预选下拉选项。不幸的是，当下拉菜单被预选时，隐藏的 div 不会加载。这似乎是 div 在代码中以及在页面加载时出现的顺序。

我读到过使用 AJAX 可以在页面最后加载一个 div...但是我没有发现在父对象被寻址之前加载子对象。我有一种感觉，这是因为这是不可能的，但我想我会问!你可以看下面的代码:

当前的 JS:

<script type="text/javascript">
    document.getElementById('donationdropdown').addEventListener('change', function() {
        Array.prototype.forEach.call(document.querySelectorAll('.paymentinfo'), function(e) {
            e.style.display = 'none';
        });
        var sel = +this.selectedIndex - 1;
        if (sel >= 0) {
            document.getElementById('payMethod').style.display = 'block';
            document.getElementById('pay' + sel).style.display = 'block';
        } else {
            document.getElementById('payMethod').style.display = 'none';
        }
    });
</script>

当前的 HTML:

<div id="d">

  <select class="cat_donationdropdown" id="donationdropdown" name="donationdropdown">
    <option value="0">
      Select Donation Type Below
    </option>
    <option value="1" 
    <?php echo ($_GET['donationdropdown'] == '1' ? 'selected="selected"' : ''); ?>
      >1
    </option>
    <option value="2">
      2
    </option>
    <option value="3">
      3
    </option>
    <option value="4">
      4
    </option>
    <option value="5">
      5
    </option>
  </select>
</div>
<div id="payMethod">

  <div id="payOptions">
    <div id="payInfo">
      <div id="pay0" class="paymentinfo indented">
        <?php
        $block = module_invoke('webform', 'block_view', 'client-block-57');
        print render($block['content']);
        ?>
      </div>
      <div id="pay1" class="paymentinfo indented">
        <?php
        $block = module_invoke('webform', 'block_view', 'client-block-58');
        print render($block['content']);
        ?>
      </div>
      <div id="pay2" class="paymentinfo indented">
        <?php
        $block = module_invoke('webform', 'block_view', 'client-block-58');
        print render($block['content']);
        ?>
      </div>
      <div id="pay3" class="paymentinfo indented">
        <?php
        $block = module_invoke('webform', 'block_view', 'client-block-57');
        print render($block['content']);
        ?>
      </div>
      <div id="pay4" class="paymentinfo indented">
        <?php
        $block = module_invoke('webform', 'block_view', 'client-block-57');
        print render($block['content']);
        ?>
      </div>
    </div>
  </div>

Answer 1

哇，我觉得你把这一切搞得太复杂了。你用 jQuery 标记了它，所以这是一个 jQuery 解决方案:

尝试使用 CSS 将所有 .paymentinfo 元素设置为默认隐藏，然后使用 $(document).ready() 触发显示/隐藏功能在选择框值上。之后，当您更改选择框时，它只会再次触发显示/隐藏功能。

Working JSFiddle here.

<style>
    .paymentinfo{
        display:none;
    }
</style>

$(document).ready(function(){
 showHide($("#donationdropdown").val());
});

$('#donationdropdown').on('change', function() {
  showHide($(this).val());
});

function showHide(id){
    $(".paymentinfo").hide();
    $("#pay" + id).show();
}