JavaScript移动与桌面问题

Question

这对于我这里的情况来说可能有点太精确并且很难回答，但我会尝试一下。

我正在尝试使用 JavaScript 为选择您自己的座位票务网站插入图像。这只是初稿，稍后我将对所有不同的数据库座位号和相应的图像文件进行更精确的说明，但我只是想首先让代码正确启动并运行。

这在网站的桌面版本上 100% 完美运行（测试了多个浏览器）。在网站的移动版本上（测试了多个浏览器），它几乎可以工作，只是它总是返回与所选的上一个座位相对应的图像。也就是说，选择的第一个座位会给我“其他”图像（因为没有之前的座位），而选择的每个连续座位都会给我在该座位之前选择的座位。

很确定问题要么出在我嵌入的多个 MutationObservers 中，要么出在 setId addEventListener 的某处，但我没有找到它。我尝试记录突变，但在我看来，桌面和移动设备之间的突变总是相同的。感谢您的任何帮助。

/* Initial declarations */
var i;
var j;
var k;
var dataSeatId;
var selectedId;
var priceTypeHeading;
var imgSrc;

/* Function to set the current database seat_no below */
function setId(evt) {
  selectedId = evt.currentTarget.dataset.tnSeatId;
}

/* Function to insert the SYOS preview image */
function insertImage(imageId, elementToMoveDown) {
    
    /* Get the correct URL and data for the image file that goes with that specific seat_no */
    
    
    
    if (imageId < 7000) {
        imgSrc = "https://thecenterpresents.org/media/5944/venue-rental-pallatte-request-a-quote-150x150.jpg";
    } else {
        imgSrc = "https://thecenterpresents.org/media/2018/visit-directions.jpg";
    }
    /* Use the below as a template for what to do when you actually build out the function to grab the seat info
    function getSeatInfo() {
        let imgUrl = "https://thecenterpresents.org/media/2695/asherwood-estatehome-box.jpg", /* 453x 356 for desktop; something for mobile;
            imgAlt = "The view of the Palladium stage from the selected seat";
    
        return {imgUrl , imgAlt};
    }
    
    var a;
    a = getSeatInfo();
    
    console.log(a.imgUrl);
    console.log(a.imgAlt);
    */

    /* Create the new image element and assign it the proper values */
    var newImg = document.createElement("img");
    newImg.src = imgSrc;
    newImg.alt = "The view of the Palladium stage from the selected seat";
    newImg.id = "syos-preview";

    /* Actually insert the new image */
    elementToMoveDown.parentNode.insertBefore(newImg, elementToMoveDown);
}

/* Function to remove the SYOS preview image */
function removeImage() {
  var previewImage = document.getElementById("syos-preview");
  previewImage.remove();
}

/* First mutation observer variables */
const syos = document.getElementsByClassName("tn-syos")[0];

const config = {
    childList: true,
    subtree: true
};

/* Callback function for the second/inner mutation observer */
const priceTypeCallback = mutations => {
    
    /* Set initial value for i */
    i = 0;

    /* Loop through the mutations */
    while (i < mutations.length) {

        /* Only worry about mutations that are related to the specific node tree */
        if (mutations[i].type === "attributes" && mutations[i].target.classList[0] === "tn-syos-price-type-selector") {
 
            /* Grab the pop up box to use */
            var a = document.getElementsByClassName("tn-syos-price-type-selector")[0];
 
            /* Check to verify that the box is indeed loaded on the screen with content and that it does not already have the image added in the case of multiple mutations */
            if (a.style.display === "" && !a.innerHTML.includes("img") && !a.innerHTML.includes("The view")) {
                
                /* Insert the image */
                priceTypeHeading = mutations[i].target.childNodes[1].childNodes[1].childNodes[2];
                insertImage(selectedId, priceTypeHeading);
                
                /* Add an event handler to pay attention to when the window is being closed so that it can remove the image */
                var closeButton = document.getElementsByClassName("tn-modal__btn-close")[0];
                closeButton.addEventListener("click", removeImage, false);
                
                /* Once the image is added or removed based on the case required, there is no need to keep cycling */
                break;

            } else {
                i += 1;
            }
        }
    }
};

/* Callback function for the first mutation observer */
const callback = mutations => {
    
    /* Set initial value for j */
    j = 0;

    /* Loop through the mutations */
    while (j < mutations.length) {

        /* Only worry about mutations that are related to the specific node tree */
        if (mutations[j].type === "childList" && mutations[j].target.classList[0] === "tn-syos-seat-container") {

            /* Grab the database seat numbers */
            var allUses = document.getElementsByTagName("use");

            /* Loop through the seat numbers and add an event listener to track which exact seats are chosen */
            for (k = 0; k < allUses.length; k+=1) {
                dataSeatId = allUses[k].dataset.tnSeatId;
                var el = document.getElementsByTagName("use")[k];
                el.addEventListener("click", setId, false);
            }

            /* Second/Inner mutation observer variables */
            var priceTypeSelector = document.getElementsByClassName("tn-syos-price-type-selector")[0];

            var priceTypeConfig = {
                attributes: true
            };

            /* Create and turn on the second/inner mutation observer */
            var observer = new MutationObserver(priceTypeCallback);

            observer.observe(priceTypeSelector, priceTypeConfig);

        }

        j += 1;
    }
};

/* Create and turn on the first mutation observer */
const observer = new MutationObserver(callback);

observer.observe(syos, config);

果酱 2.0/pcsjunior002

Answer 1

仅供参考，以防以后有人遇到此问题并遇到同样的问题。结果是我几乎不得不以不同的方式重写它。发生的情况是，由于移动设备与桌面上页面上元素的传播，首先创建了不同的元素。因此，功能和选择将以不同的顺序运行。

虽然我首先需要的 imageId 在桌面上填充得很好，但该值的设置尚未发生，因此它返回 null。我的 imgSrc 子句中的 else 子句确保我获得了初步图像，然后它总是落后于它，因为它引用了前一个图像，该图像在关闭时更新了。

无论如何，它就在那里。