Question

首次打开页面时，依赖于CSS类的所有格式和函数都与它们完全一样，只要我调用ajax响应，就好像这些类正在进行忽略。

html

<div id="selected_standards" class="touchcarousel black-and-white">     
    <ul id="standards_list" class="touchcarousel-container standards_display">
    <?php 
        $sql = "SELECT * FROM standards
                LEFT JOIN image
                ON image.imageID = standards.imageID_standard
                WHERE auditID_standard = '$audit_id'";
        $result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));
        while($row = mysqli_fetch_assoc($result)){?>                    
       <li class="touchcarousel-item"><img src="<? echo $row['imageLocation']; ?>" width="200" ></li><? 
        }?>
    </ul>
</div>

用于ajax响应的php

$output .='<ul id="standards_list" class="touchcarousel-container standards_display">';
while($row = mysqli_fetch_assoc($result)){          
   $output .='<li class="touchcarousel-item" style="list-style:none; display:inline">';
   $output .='<img src="'.$row['imageLocation'].'" width="200" >';
   $output .='<p>'.$row['imageID'].'</p>';
   $output .='</li>';               
}
$output .='</ul>';
echo $output;

ajax电话

$.ajax({
    url: 'ajax/create_audit_standard_carosel.php',
    type:'POST',
    data: 'audit_id='+audit_id,
    success: function(response){
        $('#selected_standards').html(response);
        var myStylesLocation = "touchcarousel/touchcarousel.css";
        $('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >').appendTo("head");
    }, // End of success function of ajax form
    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }
});

我尝试使用json，或使用.append将其添加到列表而不是替换它，重新加载css，内联样式，所有内容，但是就像ajax调用替换了内容一样尽管控制台html输出显示了类，但div li和ul元素会丢失所有类。

只是添加一个页面重新加载到ajax，格式化又回来了，但是那种方法击败了ajax的对象

Answer 1

我认为实现它的最佳方法是通过使用类属性来改变元素的样式。

例如：

CSS

.nonajaxed-display ul li {
    color: red;
    /* etc...*/
}

.ajaxed-display ul li {
    color: blue;
    /* etc... */
}

HTML

<div id="selected_standards" class="touchcarousel black-and-white nonajaxed-display">     
    <ul id="standards_list" class="touchcarousel-container standards_display">                
       <li class="touchcarousel-item">
           test
        </li>
        <li>
           // etc...
        </li>
    </ul>
</div>

JS

$.ajax({
    url: 'ajax/create_audit_standard_carosel.php',
    type: 'POST',
    data: 'audit_id=' + audit_id,
    success: function (response) {
        $('#selected_standards').addClass('ajaxed-display');
        $('#selected_standards').removeClass('nonajaxed-display');
        $('#selected_standards').html(response);
    }, // End of success function of ajax form
    error: function (xhr, ajaxOptions, thrownError) {
        alert(thrownError);
    }
});

抱歉我的英语不好。

Jquery ajax响应似乎忽略了类

1 个答案: