0

我有以下问题，非常感谢您的帮助 :) 请原谅我的“deepL”英语 :)

我正在使用 ajax 来检索数据库上的图像路径，以创建带有结果的动态图像库。为此，根据图像的数量，for 循环运行 x 次。在一次运行中，应克隆并添加一张载玻片。之后，将使用“src”属性相应地重新填充幻灯片上的图像。

JS代码：

function show_anbieter_profilbilder(){
    var sessionID = localStorage.getItem("SE_session_ID");  
    if (sessionID != null){  
        var postData={"contentID":6,"sessionID":sessionID};
        var dataString= JSON.stringify(postData);       
        ajaks(myCallback, dataString, "http://localhost/Login/wf_loadContent.php");             
        function myCallback(result){            
            var Daten = result;                     
            for(i=0; i<Daten.length; i++){
                var Bildpfad = Daten[i][0];
                var Bildstatus = Daten[i][1];
                var source = "http://localhost/Login/" + Bildpfad;
                if(Bildstatus == 1){    
                    $('#anbieter_profilbildgallerie_bild').attr('src', source);                             
                }
                var anz = Daten.length +1;
                $('#anbieter_profilbildergallerie_slide').attr('aria-label', "1 of " + anz);
                $('.w-slider-aria-label').attr('aria-live', "polite");
                $newslide = $('#anbieter_profilbildergallerie_slide').clone().insertBefore('#anbieter_profilbildergallerie_mask .w-slider-aria-label:last-child');  
                $newslide.attr('id', i);
                var pos = i+2;
                $('#' + i).attr('aria-label', pos + " of " + anz);
                $('#' + i).children().children().attr('src', source); 
            }  
        }
    }   
}

php代码：

    case 6:
        $query = "SELECT Bild, Aktiv FROM profilbilder WHERE UserID = '".$sessionID."'";
        $result = mysqli_query($conn, $query);
        $bilder = [];
        while ($row = mysqli_fetch_row($result)) {
            array_push($bilder, $row);
        }
        echo json_encode($bilder);

HTML 代码（摘录）：

<div id="anbieter_profilbildergallerie_popup" class="anbieter_profilbildergallerie_popup">
    <div id="anbieter_profilbildergallerie_popup_form" class="anbieter_profilbildergallerie_popup_form">
        <div data-delay="4000" data-animation="slide" class="slider-4 w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true">
            <div id="anbieter_profilbildergallerie_mask" class="anbieter_profilbildergallerie_mask w-slider-mask">
                <div id="anbieter_profilbildergallerie_slide" class="anbieter_profilbildergallerie_slide w-slide">
                    <div class="container-10 w-container">
                        <img src="mySource :P" loading="lazy" id="anbieter_profilbildgallerie_bild" alt="" class="anbieter_profilbildgallerie_bild"/>
                    </div>
                </div>
            </div>
            <div class="w-slider-arrow-left">
                <div class="icon-2 w-icon-slider-left">
                </div>
            </div>
            <div class="w-slider-arrow-right">
                <div class="icon-3 w-icon-slider-right">
                </div>
            </div>
            <div id="profilbildgallerie_slidenav" class="profilbildgallerie_slidenav w-slider-nav w-round">
            </div>
        </div>
        <div class="section-31 w-clearfix wf-section">
            <a href="#" class="anbieter_profilbilderdelete_button w-button">Löschen</a>
            <a href="#" class="anbieter_profilbildersetactive_button w-button">Zum Profilbild machen</a>
        </div>
    </div>
</div>

问题是，虽然元素被正确克隆，但只要它在 ajax 成功函数内，它就不会被添加。一旦我把它放在外面，它就会按预期运行。但是，现在，由于 ajax 的异步特性，我需要将所有内容都放在成功函数中（请随时在这里教我更好）以知道我需要多少张幻灯片（因为图像的数量是可变的）。另外：我正在使用 webflow，要克隆的元素是 webflow“Slider”元素的幻灯片。这应该添加到“滑块”元素中为其提供的掩码中。

消除错误原因：

  • clone-append 的语法错误：代码在成功函数之外工作。

  • 函数内部不知道克隆对象或附加对象的 ID（无论出于何种原因）：两个对象都可以使用 .css 设置样式...

  • ajax 的结果没有返回想要的结果：已检查，运行正确

  • 克隆和附加在带有 webflow 内容的 ajax 成功函数中不起作用：完全相同的星座在其他地方也有效！请参阅以下代码：

工作代码：

function show_anbieter_ausbildung(){
    var sessionID = localStorage.getItem("SE_session_ID");  
    if (sessionID != null){  
        var postData={"contentID":2,"sessionID":sessionID};
        var dataString= JSON.stringify(postData)
        ajaks(myCallback, dataString, "http://localhost/Login/wf_loadContent.php");
        function myCallback(result){
            var Daten = result;                 
            for(i=0; i<Daten.length; i++){
                var EintragsID_r = Daten[i][0];
                var Institution_r = Daten[i][1];
                var Abschluss_r = Daten[i][2];
                var Fachrichtung_r = Daten[i][3];
                var Abschlussnote_r = Daten[i][4];
                var Beginn_r = convertdate(new Date(Daten[i][5]));
                var Ende_r = convertdate(new Date(Daten[i][6]));
                var Kurzbeschreibung_r = Daten[i][7];
             
                $ausbildungitem = $('#Ausbildungitem').clone(true).appendTo('#Ausbildung_Inhalt');             
                $ausbildungitem.attr('id',"item-" + EintragsID_r);
                $ausbildungitem.show();
                $ausbildungitem.attr('draggable', "true");                      
                $ausbildungitem.children().children('.ausbildung_institution').text(Institution_r);
                $ausbildungitem.children().children('.ausbildung_abschluss').text(Abschluss_r + ", " + Fachrichtung_r + ", Abschlussnote: " + Abschlussnote_r);
                $ausbildungitem.children().children('.ausbildung_zeitraum').text(Beginn_r +" - " + Ende_r);
                $ausbildungitem.children().children('.ausbildung_kurzbeschreibung').text(Kurzbeschreibung_r);
                $ausbildungitem.children().children('.anbieter_ausbildungupdate_edit').attr('editID', EintragsID_r);
                $ausbildungitem.children().children('.anbieter_ausbildungdelete_button').attr('deleteID', EintragsID_r);                
            }
            $('#Ausbildung_Inhalt').height(140*Daten.length);       
        };                        
    };    
};

更新：它现在在某些情况下有效。这里新添加的元素：

<div id="anbieter_profilbildergallerie_mask" class="anbieter_profilbildergallerie_mask w-slider-mask">
    <div id="anbieter_profilbildergallerie_slide" class="anbieter_profilbildergallerie_slide w-slide" aria-label="1 of 4" role="group" style="transform: translateX(0px); opacity: 1; transition: transform 500ms ease 0s;"></div>
    <div id="0" class="anbieter_profilbildergallerie_slide w-slide" aria-label="2 of 4" role="group" style="transform: translateX(0px); opacity: 1; transition: transform 500ms ease 0s;" aria-hidden="true"></div>
    <div id="1" class="anbieter_profilbildergallerie_slide w-slide" aria-label="3 of 4" role="group" style="transform: translateX(0px); opacity: 1; transition: transform 500ms ease 0s;" aria-hidden="true"></div>
    <div id="2" class="anbieter_profilbildergallerie_slide w-slide" aria-label="4 of 4" role="group" style="transform: translateX(0px); opacity: 1; transition: transform 500ms ease 0s;" aria-hidden="true"></div>
    <div aria-live="polite" aria-atomic="true" class="w-slider-aria-label" data-wf-ignore="" aria-hidden="true">Slide 1 of 4.</div>
</div>

现在的问题是，属性“aria-live”有时是礼貌的，有时它会关闭（随机？），然后克隆的元素不会在幻灯片中显示和访问。我还更新了我的 js 代码以在滑块之前设置附加元素，以便滑块包含所有这些元素。此外，我尝试将 aria-live 属性设置为礼貌，但这不起作用。（我对 aria-live 一无所知）。

4

0 回答 0