Javascript 更改加载图像时不适用于多个元素 $（文档）.ready（函数（）{ $（“.catclass”）.live（“更改”，函数（）{ var whichcat=$（this.attr（'id'）） var catid=$（this.val（）； var url='ajaxcat.php'； //$（'tblloding'）.show（）； 如果（whichcat=='maincat'）{ var=1； }否则{ var getcat=whichcat.split（“|”）； var replacevar=parseInt（getcat[1]）+1； } $（'#prod'）.hide（）； document.getElementById（'products'）。innerHTML=''； 对于（i=replacevar；我在ajax请求中不显示所有内容，而只显示第一个元素。请帮助我。提前感谢。 在ajax请求中加载时不显示所有元素，而只显示第一个元素。请帮助我。提前感谢。

ID是页面中的唯一标识符

绝对不能有两个元素具有相同的id。请尝试更改类的id，然后使用

.ajaxloadingimg

更改：

  <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>

致：

将

id=“ajaxloadingimg”

替换为

class=“ajaxloadingimg”

，并相应地在javascript中执行以下操作：

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

---

id

的全部目的是唯一地标识一个元素。因此不能有多个元素具有相同的

id

。在这种情况下，我们使用

class

属性。

为多个元素定义了相同的id

ajaxloadingimg

用于div。您应该使用Class，而不是将其用作Id

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

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

应该是正确的。

$（document）.ajaxStart（function（）{var me=$（this）；$（“#ajaxloadingimg”，me）.show（）；$（document）.ajaxStop（function（）{var me=$（this）；$（“#ajaxloadingimg”，me.hide（）））；但是也在上面工作代码……我认为问题还不是很清楚。就所问的问题而言，答案是正确的，但真正需要的是，当

select

被更改时，某种ajax请求被启动，并有一个加载面板（可能特定于select）应该显示。是的，这是正确的，但现在显示的不是您想要的吗？我使用的是dependent selectbox，数据通过ajax加载工作正常。但问题是，当ajax调用时，我希望在selectbox旁边显示ajax加载img，直到加载另一个dependent selectbox。您需要捕获比

ajaxStart

和

ajaxStop

。@在这种情况下，您应该将代码添加到在ajax中加载数据的问题中。

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

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

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