Question

下面是我的HTML和jQuery代码。 jQuery显示隐藏的元素，#image4和#video4元素除外，如果我选择image或video，它们将保持隐藏状态。所有其他元素都能正确显示。

知道为什么那两个不会显示？

JS：

 $(document).ready(function(){
        var fields = jQuery('#image_type');
        var select = this.value;
        fields.change(function () {
            if ($(this).val() == 'image') {
              alert($(this).val());
                $('#images_pop_up').show();
                $('#video1').hide();
                $('#video2').hide();
                $('#video3').hide();
                $('#video4').hide();
                $('#image1').show();
                $('#image2').show();
                $('#image3').show();
                $('#image4').show();
                $(' #image5').show();
              }
              else {
                $('#images_pop_up').show();
                $('#image1').hide();
                $('#image2').hide();
                $('#image3').hide();
                $('#image4').hide();
                $('#image5').hide();
                $('#video1').show();
                $('#video2').show();
                $('#video3').show();
                $('#video4').show();
                $('#image5').show();
              }

        });
    });

HTML：

<div id ="images_pop_up" style="display:none;">
   <span id="image1"  style="display:none;" ><img src="/uploads/commerce/images/large/easton-163135-wheeled-bag.jpg" border="0" alt="easton-163135-wheeled-bag.jpg" title=" easton-163135-wheeled-bag.jpg " class="productimage"><input type="hidden" name="products_previous_image_lrg" value="easton-163135-wheeled-bag.jpg"><br>Nice bag</span>
   <span  id ="video1" style="display:none;"></span></td>
   <td  class="textSmall" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
         <tr>
            <span id="image3"  style="display:none;"><input type="hidden" name="products_previous_image_lrg" value="easton-163135-wheeled-bag.jpg"><input type="hidden" name="products_previous_image_lrg_caption" value="Nice bag"></span>
            <span id ="video3"><input type="hidden" name="products_previous_video_embed"><input type="hidden" name="products_previous_video_embed_caption"></span>
            <td class="textSmall" valign="top"><span id="image4" style="display:none;">New Image File: <input type="text" name="products_image_lrg" value="easton-163135-wheeled-bag.jpg"><br>Image Caption: <input type="text" name="products_image_lrg_caption" value="Nice bag"></span>
               <span id ="video4" style="display:none;">Video Embed field: <input type="text" name="products_video_embed"><br>Video Image Caption: <input type="text" name="products_video_embed_caption"></span>
            </td>
            <td><span id="image5" style="display:none;"> <a href='#' onclick='return false;'><img src="includes/languages/english/images/buttons/button_select.gif" border="0" alt="Select" title=" Select " onclick="popupWindowSelectImg('./images_select.php?imgSize=lrg&inpt=products_image_lrg&div=div_img_lrg&width=200&height=30','lrg','products_image_lrg','div_img_lrg');"></a></span></td>
         </tr>
         <tr>
            <td colspan="2">
               <div id='div_img_lrg'></div>
            </td>
         </tr>
      </table>
   </td>
</div>

Answer 1

对我来说最重要的是，当你可以通过给他们所有相同的类（或者至少是相同类的适当元素组）来为你工作时，你可以复制粘贴，然后隐藏并根据它显示它们。

您的错误可能是由选择器中的某个地方或您在标记中设置ID的位置引起的轻微错误造成的。

Answer 2

试试这个

    $(document).ready(function () {
    var fields = jQuery('#image_type');
    var select = this.value;
    $('#image_type').change(function () {
        if ($(this).val() == 'image') {
            alert($(this).val());
            $("[id^=image]").show();
            $("[id^=video]").hide();
        } else {
            $("[id^=video]").show();
            $("[id^=image]").hide();
        }

    });
});

当我使用.show（）命令时，jQuery不显示特定的隐藏内容

2 个答案: