Question

  <script>
    $(document).ready(function() { 
    $(".catclass").live("change", function(){
            var whichcat = $(this).attr('id')   
            var catid = $(this).val();        
            var url = 'ajaxcat.php'; 
            //$('#tblLoading').show();
            if (whichcat == 'maincat') {
                var replacevar = 1; 

            } else {
                var getcat = whichcat.split("|");
                var replacevar = parseInt(getcat[1]) + 1;


            }
                $( '#prod').hide();
                document.getElementById('products').innerHTML = '';
                for (i = replacevar; i <=5; i++) {
                    $( '#cat'+i ).hide();
                    document.getElementById('scat|'+i).innerHTML = '';
                }


                $.post(url, {'submit': true, 'pcat':catid, cache: true, prod : ''}, function(response) {                    
                    if(response) {
                        response = response.trim()
                        if (response == 'no') {
                            /*$.post(url, {'submit': true, 'pcat':catid, cache: true, prod = 'yes'}, function(response) {
                                $( '#prod').show();
                                document.getElementById('products').innerHTML = response;
                            });*/
                            getprodcuts(catid);

                        } else {
                            $( '#cat'+replacevar ).show();
                            document.getElementById('scat|'+replacevar).innerHTML = response;
                        }   
                    }
                    else {
                        alert('Please try later');                      
                    }
               });
          });


    });

    </script>


    <script>
            $( document ).ajaxStart(function() {
             var me = $(this); 
            $( "#ajaxloadingimg",me).show();

            });
            $( document ).ajaxStop(function() {
            var me = $(this); 
           $( "#ajaxloadingimg",me).hide();
            });

        </script> 

            <div id="cat2" style="display:none">
                <label>Sub Category</label><select name="scat2" id="scat|2" class="catclass">
                </select><div id="ajaxloadingimg" style="display:none;">loading...</div>
            </div>
            <div id="cat3" style="display:none">
                <label>Sub Category</label><select name="scat3" id="scat|3" class="catclass">
                </select><div id="ajaxloadingimg" style="display:none;">loading...</div>
            </div>
            <div id="cat4" style="display:none">
                <label>Sub Category</label><select name="scat4" id="scat|4" class="catclass">
                </select><div id="ajaxloadingimg" style="display:none;">loading...</div>
            </div>
            <div id="cat5" style="display:none">
                <label>Sub Category</label><select name="scat5" id="scat|5" class="catclass">
                </select><div id="ajaxloadingimg" style="display:none;">loading...</div>
            </div>
            <div id="prod" style="display:none">
                <label style="vertical-align:top; padding-top:8px;" >Product</label><select name="products[]" id="products" multiple="multiple" >
                </select>
            </div>

=＆GT;加载不是在ajax请求中显示所有内容而是仅显示第一个元素。请帮我。提前致谢。加载不是在ajax请求中显示所有内容而是仅显示第一个元素。请帮我。提前谢谢。

Answer 1

ID是页面内的唯一标识符。

永远不应该有两个具有相同ID的元素。尝试更改课程，并使用.ajaxloadingimg

更改：

<div id="ajaxloadingimg" style="display:none;">

致：

<div class="ajaxloadingimg" style="display:none;">

Answer 2

将id="ajaxloadingimg"替换为class="ajaxloadingimg"，并在您的javascript中相应地执行此操作：

$( document ).ajaxStart(function() {
   $( ".ajaxloadingimg").show();

});
$( document ).ajaxStop(function() {
 $( ".ajaxloadingimg").hide();
});

id的全部目的是唯一地标识一个元素。因此，您不能拥有具有相同id的多个元素。在这种情况下，我们使用class属性。

Answer 3

您为多个元素定义了相同的ID。

ajaxloadingimg用于div。不要将它用作Id，而应使用Class。

<div class="ajaxloadingimg" style="display:none;"> should be the proper one.

更改加载图像不适用于多个元素

3 个答案: