Question

此问题之前已在不同背景下提出（在Firefox中运行，而不是Chrome）。

我的显示/隐藏功能在Firefox中不起作用，但它们在Chrome中运行良好。从技术上讲，它在Firefox中运行ONCE，然后在刷新页面之前它将无法再次运行。再次，在Chrome和Internet Explorer中运行良好。

jQuery v1.11.1
Firefox v40.0.3
Chrome v45.0.2454.93

****更新：****我修复了问题：我更换了＆＃34; jQuery＆＃34;使用以下代码。

/* 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填充item数组。这是否也必须包括在内？基本上他们是这样设置的：

var json = {
    "items": [

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

    ]
};

我特别困惑，因为我在网站的另一部分（显示/隐藏注册表单）中使用了这种确切的方法，并且工作得很好。 Soooo我在这里做错了什么？ = /

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();
        }
    });
}

似乎切换是一种更好的方法。仍然不完全确定为什么原来没有工作，但我很高兴！希望这有助于某人！

显示/隐藏仅在Chrome中工作（jQuery）

1 个答案: