使用jQuery实现单选按钮控制Div显示/隐藏及内容上下切换功能求助

Hey there! Let's fix up your code step by step—you're already on the right track with the jQuery logic, just a few small tweaks needed to get it working perfectly.

First, let's address the key issues in your code #

1. Label-radio button association: Your <label> tags had incorrect for attributes, which meant clicking the label text wouldn't select the corresponding radio button.
2. Initial state not loading: Your jQuery only ran when you clicked a radio button, so the default checked options didn't trigger the correct element display on page load.
3. Positioning improvements: The absolute-positioned elements were shifted right with left:50% but weren't properly centered.

Here's the fixed, working code: #

HTML (fixed label associations)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>Type</p>
  <input type="radio" name="box" value="image" id="img" checked>
  <label for="img">Image</label>
  <br />
  <input type="radio" name="box" value="text" id="text">
  <label for="text">Text</label>
</div>
<div>
  <p>Direction</p>
  <input type="radio" id="top" name="types" value="top" checked>
  <label for="top">Top</label>
  <br />
  <input type="radio" id="bottom" name="types" value="bottom">
  <label for="bottom">Bottom</label>
</div>
<div class="imagetop">
  <img src="smiley.gif" width="42" height="42">
  <span>top image</span>
</div>
<div class="imagebottom">
  <img src="smiley.gif" width="42" height="42">
  <span>bottom image</span>
</div>
<div class="texttop">
  <span>top text</span>
</div>
<div class="textbottom">
  <span>bottom text</span>
</div>

CSS (improved positioning)

.texttop, .textbottom, .imagebottom { display: none; }
.imagetop, .texttop {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%); /* Centers elements horizontally */
}
.imagebottom, .textbottom {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%); /* Centers elements horizontally */
}

jQuery (reusable logic + initial load trigger)

$(document).ready(function(){
  // Reusable function to handle display updates
  function updateContentDisplay() {
    const selectedType = $('input[name="box"]:checked').val();
    const selectedDirection = $('input[name="types"]:checked').val();
    
    // Hide all content containers first
    $('.imagetop,.imagebottom,.texttop,.textbottom').hide();
    // Show the matching container
    $('.' + selectedType + selectedDirection).show();
  }

  // Run once on page load to set default state
  updateContentDisplay();

  // Run whenever a radio button is clicked
  $('input[type="radio"]').click(updateContentDisplay);
});

What this fixes: #

• Labels now properly link to their radio buttons, so clicking "Image" or "Text" selects the corresponding option.
• The default checked radio options will immediately show the correct content when the page loads.
• Content elements are centered horizontally for a cleaner look.
• The jQuery logic is wrapped in a reusable function, making the code easier to read and maintain.

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