僅顯示/隱藏在Chrome中工作（jQuery）

Question

之前已經在不同的環境中詢問過此問題（在Firefox中有效，而不在Chrome中有效）。

我的顯示/隱藏功能在Firefox中無法使用，但在Chrome中可以正常使用。 從技術上講，它在Firefox中只能運行一次，然后直到刷新頁面后它才能再次運行。 同樣，在Chrome和Internet Explorer中也可以正常工作。

• jQuery v1.11.1
• Firefox v40.0.3
• 鉻v45.0.2454.93

****更新：****我解決了這個問題：我將“ jQuery”下的代碼替換為以下代碼。

/* Show Product Overlay */
function enlargeProduct() {
    $('#productOverlay').toggle('fast', 'linear', 'closeProductOverlay()');
}

function closeProductOverlay() {
    /* Hide Product Overlay */
    $(document).on('click', function (event) {
        if (!$(event.target).closest('#clickControl').length) {
            $('#productOverlay').hide();
        }
    });
}

jQuery-無效的舊代碼：

function enlargeProduct() {
/* Show Hidden Div Overlay */

$('#productOverlay').show();
};

function closeProductOverlay() {
/* Hide Product Overlay */
$(document).on('click', function (event) {
    if (!$(event.target).closest('#clickControl').length) {
        $('#productOverlay').hide();
    }
});
}

顯示/隱藏的HTML

    <!-- Product Overlay -->
    <div id="productOverlay" onclick="closeProductOverlay()">
        <div id="mobiPadding">
            <div id="productContainer">
                <div id="clickControl">
                    <input type="number" onchange="addQuantity()" value="1" min="1" max="99" />
                    <input type="button" class="btn btn-primary" onclick="addToCart()" value="Add to Cart" />
                </div>
            </div>
        </div>
    </div>

HTML控件-這是我在其中填充HTML的div容器

<div class="item-container container">

</div>

用來填充HTML控件的Javascript

var item = document.getElementsByClassName("item-container")[0];
var items = json.items;

for (var i = 0; i < items.length; i++) {

/* Outermost Div - For Bootstrap Formatting */
var div = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "col-md-3";
div.setAttributeNode(divClass);
item.appendChild(div);

/* Center Div - For adding Padding to each box */
var div2 = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "itemDiv";
div2.setAttributeNode(divClass);
div.appendChild(div2);

/* Innermost Div - For Adding Hover Effects (Not visible, functionality only) */
var hoverDiv = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "hoverDiv";
hoverDiv.setAttributeNode(divClass);
divClass = document.createAttribute("onmouseover");
divClass.value = "onMouseOver(" + i + ")";
hoverDiv.setAttributeNode(divClass);
divClass = document.createAttribute("onmouseout");
divClass.value = "onMouseOut(" + i + ")";
hoverDiv.setAttributeNode(divClass);


/* Add new ID iteration to identify selected product for button toggle */
var divId = document.createAttribute("id");
divId.value = "btn" + i;
hoverDiv.setAttributeNode(divId);

div2.appendChild(hoverDiv);

/* Add clearfix to clear formatting after each fourth iteration */
if (i >= 0) {
    var j = i - 3;
    if (j % 4 == 0) {
        var clearfix = document.createElement("div");
        var fixClass = document.createAttribute("class");
        fixClass.value = "clearfix";
        clearfix.setAttributeNode(fixClass);
        item.appendChild(clearfix);
    }
}

/* Title */
var h2 = document.createElement("h4");
h2.innerHTML = items[i].title.text;
hoverDiv.appendChild(h2);

    /* Class */
    var titleClass = document.createAttribute('class');
    titleClass.value = "titleClass";
    h2.setAttributeNode(titleClass);

/* Image */
var img = document.createElement("img");
var src = document.createAttribute('src');
src.value = items[i].image.text;
img.setAttributeNode(src);
hoverDiv.appendChild(img);

    /* Class */
    var imageClass = document.createAttribute('class');
    imageClass.value = "imageClass";
    img.setAttributeNode(imageClass);

/* Description */
var p = document.createElement("p");
p.innerHTML = items[i].description.text;
hoverDiv.appendChild(p);

    /* Class */
    var descClass = document.createAttribute('class');
    descClass.value = "descriptionClass";
    p.setAttributeNode(descClass);


/* Price */
var price = document.createElement("p");
price.innerHTML = items[i].price.text;
hoverDiv.appendChild(price);

    /* Class */
    var priceClass = document.createAttribute('class');
    priceClass.value = "priceClass";
    price.setAttributeNode(priceClass);

/* Hidden Click to Enlarge Product Button - Show/Hide on Hover*/
    var productButton = document.createElement("div");
    productButton.innerHTML = '<input id="productBtn' + i + '" onclick="enlargeProduct()" class="productBtn btn btn-primary" value="Click to Enlarge"/>';
    hoverDiv.appendChild(productButton);

};

/* DOM Event Listeners - Handle Mouse Over/Out to Toggle Button and Product Overlays */
function onMouseOver(i) {
    $('#productBtn' + i).show();
}

function onMouseOut(i) {
    $('#productBtn' + i).hide();
}

我用JSON填充了項目數組。 這是否也需要包括在內？ 本質上，它們是這樣設置的：

var json = {
    "items": [

  {
      "title": { "text": "#PART0001" },
      "image": { "text": "../items/sale-october/PART0001.jpg" },
      "description": { "text": "Item Description" },
      "price": { "text": "$99.99" }
  }

    ]
};

我特別困惑，因為我在網站的另一部分（顯示/隱藏注冊表單）使用了這種確切的方法，並且效果很好。 我在這里做錯什么了嗎？ = /

Answer 1

解決了：

將jQuery下的代碼替換為以下代碼：

/* Show Product Overlay */
function enlargeProduct() {
    $('#productOverlay').toggle('fast', 'linear', 'closeProductOverlay()');
}

function closeProductOverlay() {
    /* Hide Product Overlay */
    $(document).on('click', function (event) {
        if (!$(event.target).closest('#clickControl').length) {
            $('#productOverlay').hide();
        }
    });
}

似乎切換是一種更好的方法。 仍不能完全確定為什么原件不起作用，但是我很高興！ 希望這對某人有幫助！