如何在JavaScript页面加载时获取switch toggle状态并控制对应div显隐

现有代码存在两个核心问题：

• 全局选择.show-hide会控制所有关联div，无法实现单个开关对应控制单个div的需求
• 缺少页面加载完成后的初始化显隐逻辑

步骤1：调整PHP渲染的HTML结构 #

修改后代码如下，核心是保证开关id唯一、添加属性关联开关和对应div，稳定性最高：

<li>
    <?php echo $_ship_method_value['shipping_title'];?>
    <label class="switch">
      <!-- Toggled Case -->
      <!-- 用shipping_id保证id唯一，避免多个开关id重复 -->
      <input 
        type="checkbox" 
        id="toggd_<?php echo $_ship_method_value['shipping_id']; ?>" 
        name="toggle" 
        value="<?php echo $_ship_method_value['shipping_id']; ?>" 
        class="cmn-toggle cmn-toggle-round" 
        data-switchery 
        <?php if(array_key_exists("shipping_available",$_ship_method_value)) echo 'checked'; ?> 
      /> 
      <span class="slider round hide-off"></span>
    </label>
</li>
<!-- 新增data-shipping-id属性，和对应开关的value值绑定 -->
<div class="show-hide" data-shipping-id="<?php echo $_ship_method_value['shipping_id']; ?>">
   <p>Want to show this div ;-)</p>
</div>

步骤2：替换jQuery逻辑 #

修改后代码同时覆盖页面初始化和开关切换两个场景：

// 公共方法：根据开关状态控制对应div显隐
function toggleRelateDiv($toggle) {
  const shipId = $toggle.val();
  const $target = $(`.show-hide[data-shipping-id="${shipId}"]`);
  $toggle.prop('checked') ? $target.show() : $target.hide();
}

$(document).ready(function(){
  // 页面加载完成后，初始化所有开关对应的div显隐
  $('input[name="toggle"]').each(function(){
    toggleRelateDiv($(this));
  });

  // 绑定开关切换事件
  $('input[name="toggle"]').change(function(){
    toggleRelateDiv($(this));
  });
});

可选简化方案（无需修改HTML） #

如果不想调整HTML结构，且你的.show-hide固定是开关父级<li>的下一个同级元素，可以直接用DOM遍历定位元素，仅替换jQuery逻辑即可：

function toggleRelateDiv($toggle) {
  const $target = $toggle.closest('li').next('.show-hide');
  $toggle.prop('checked') ? $target.show() : $target.hide();
}

$(document).ready(function(){
  $('input[name="toggle"]').each(function(){
    toggleRelateDiv($(this));
  }).change(function(){
    toggleRelateDiv($(this));
  });
});

内容的提问来源于stack exchange，提问作者Alok Kumar