Question

我正在编写一个chrome扩展程序，其中包含两个html文档（client/views/sidebar.html和client/views/popup.html），每个文档都包含一个<div class='my-button'></div>元素。每个文档还有一个关联的Javascript文档，其中包含以下代码：

$('<iframe id="popup" class="extension-popup"/>').appendTo('body');
$('#popup').contents().find('body').load(chrome.extension.getURL('client/views/popup.html'));

$('<iframe id="sidebar" class="extension-sidebar"/>').appendTo('body');
$('#sidebar').contents().find('body').load(chrome.extension.getURL('client/views/sidebar.html'));

var popIframe = document.getElementById('popup').contentWindow;
var sbIframe = document.getElementById('sidebar').contentWindow;

// on popup.js
var button = popIframe.document.getElementsByClassName('my-button');
// on sidebar.js
var button = sbIframe.document.getElementsByClassName('my-button');

var buttonArr = [];
buttonArr.push(popIframe.document.getElementsByClassName('my-button'));
buttonArr.push(sbIframe.document.getElementsByClassName('my-button'));

button.onClick(function() {
    buttonArr.forEach(function(btn) {
        $(btn).toggleClass('button-on');
    });
});

CSS文件：（css / style.css）

.my-button {
    background: rgb(255, 0, 0);
}
.button-on {
    background: rgb(0, 255, 0);
}
.button-on:hover {
    box-shadow: 0 0 2px 1px rgb(47, 75, 98);
    box-shadow: 0 0 2px 1px rgba(47, 75, 98, 0.25);
    transition: all 0.1s ease-in-out;
}

的manifest.json：

{
  "name": "My Extension",
  "version": "0.1.3",
  "manifest_version": 2,
  "description": "This is my extension",
  "browser_action": {
    "default_title": "My Extension",
    "default_icon": {
      "19": "images/ph-icon-grey19.png",
      "38": "images/ph-icon-grey38.png"
    }
  },
  "icons": {
    "16" : "images/ph-icon16.png",
    "48" : "images/ph-icon48.png",
    "128": "images/ph-icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*", "https://*/*", "http://*/*"],
      "js": ["plugins/jquery-1.11.3.min.js", "client/utilities/helpers.js", "client/utilities/initialize.js"],
      "run_at": "document_start",
      "all_frames" : false
    }
  ],
  "background": {
    "scripts": ["client/utilities/config.js", "plugins/jquery-1.11.3.min.js", "client/utilities/analytics.js", "client/utilities/background.js", "client/utilities/helpers.js"],
    "persistent": true
  },
  "permissions": ["tabs", "<all_urls>", "storage", "http://*/*", "*://*/*", "clipboardWrite"],
  "content_security_policy": "script-src 'self' https://www.google-analytics.com https://api.ipify.org https://freegeoip.net; object-src 'self'",
  "web_accessible_resources": [
    "images/*",
    "css/*",
    "client/*",
    "fonts/*"
  ],
  "homepage_url": "http://example.com/",
  "offline_enabled": false
}

现在，当我点击一个按钮时，该按钮的背景立即改变，但是另一个按钮的背景不会改变，直到我将鼠标移到父iframe上。这非常令人沮丧。有人可以解释发生了什么吗？

在鼠标悬停之前，JQuery .toggleClass（）不会更新兄弟元素

0 个答案: