WordPress中类似的HTML元素冲突答案

【问题标题】：Similar HTML elements conflicting in WordPressWordPress中类似的HTML元素冲突
【发布时间】：2021-07-27 21:03:50
【问题描述】：

我的 WordPress 网页上有两个 HTML 小部件。两者的功能相同：单击按钮时颜色会发生变化——现在只有白色和黑色是有效的，我还没有渲染其他颜色。我需要在一个页面上有几个这样的小部件（大约 8 个），虽然它们有不同的 ID 和函数名称，但只有小部件 A 有效，小部件 B 不会变为黑/白，只显示初始图像。

就其本身而言，小部件 B 可以完美运行，因此我无法弄清楚如何才能使这两种功能在同一页面上发挥作用。

感谢任何建议。

查看图片：https://ibb.co/Ct98ggj

小部件 A：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retractable Security</title>
    <style>
        body { margin: 0; }

.columns {
  column-count: 1;  
}

.singlecol {
display: flex; 
align-content: center;
justify-content: center; 
align-items: center;
}

#retractablesecurity {
    margin: 0 auto;
    align-content: center;
    justify-content: center; 
    align-items: center;
    background-image: url('');
    background-image: -webkit-image-set(url(''));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 75%;
    max-width: 500px;
    height: auto;
}
#retractablesecurityContainer { 
    display: flex; 
    align-content: center;
    justify-content: center; 
    align-items: center;
    font-family: Avenir, sans-serif;
}

.colour {
    border: 1px solid #BDBDBD;
    border-radius: 100%;
    font-size: 7px;
    margin-top: 10px;
    margin-left: 5px; 
    margin-right: 5px;
    margin-bottom:15px;
    width: 60px;
    height:60px;
    padding: 7px;
}

#colour1 {
    background-color:#FFFFFF;
    color:#BDBDBD;
  
}

#colour2 {
    background-color:#4D422D;
    color:#fff;
}

#colour3 {
    background-color:#EFDAC0;
    color:#fff;
}

#colour4 {
    background-color:#7C6956;
    color:#fff;
}

#colour5 {
    background-color:#B5BFC5;
    color:#fff;
}

#colour6 {
    background-color:#455560;
    color:#fff;
}

#colour7 {
    background-color:#000018;
    color:#fff;
}
        
    </style>
</head>
<body>
    <div class="columns">
    <figure id="retractablesecurityContainer">
        <canvas id="retractablesecurity" width="500" height="500"></canvas>
    </figure>  
    <div class="singlecol">
        <button id="colour1" class="colour" >Matt White</button>
        <button id="colour2" class="colour">Matt Bronze</button>
        <button id="colour3" class="colour">Matt Sand</button>
        <button id="colour4" class="colour">Matt Light Brown</button>
        <button id="colour5" class="colour">Matt Aluminium</button>
        <button id="colour6" class="colour">Matt Charcoal</button>
        <button id="colour7" class="colour">Matt Black</button>
    </div>

    <script >
      const imgArr = [{
    background: 'https://franchises.trellidor.co.za/price-portal/wp-content/uploads/sites/75/2021/07/Retractable-White.png'
},
{ 
    background: 'Shutter_Bronze.png'
},
{
    background: 'Sand.png'
},
{
    background: 'Light_Brown.png'
},
{
    background: 'Aluminum.png'
},
{
    background: 'Charcoal.png'
},
{
    background: 'https://franchises.trellidor.co.za/price-portal/wp-content/uploads/sites/75/2021/07/Retractable-Black.png'
},
]

const btn = document.querySelectorAll('.colour'),
retractablesecurity = document.querySelector("#retractablesecurity"),
retractablesecurityCanvas = retractablesecurity.getContext('2d'),
    brushRadius = (retractablesecurity.width / 100) * 7;

// default image
img = new Image();
img.onload = function () {
    retractablesecurityCanvas.drawImage(img, 0, 0, retractablesecurity.width, retractablesecurity.height);
}
img.src = 'https://franchises.trellidor.co.za/price-portal/wp-content/uploads/sites/75/2021/07/Retractable-White.png'


for (var i = 0; i < imgArr.length; i++) {
    btn[i].setAttribute('data', i);
    btn[i].addEventListener("click", function () {
        myFunc(this);
    });
}

function myFunc(x) {
    var arr = x.getAttribute('data');
    img.src = imgArr[arr].sketch
    retractablesecurity.style.background = `url(${imgArr[arr].background})`;
    retractablesecurity.style.backgroundSize = 'contain';
    retractablesecurity.style.backgroundRepeat = 'no-repeat';
    retractablesecurity.style.backgroundPosition = 'center';
    retractablesecurityCanvas.clearRect(0, 0, retractablesecurity.width, retractablesecurity.height);
    retractablesecurityCanvas.globalCompositeOperation = "destination-over";
}

    </script>
    </div>
</body>
</html>

小部件 B：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Window</title>
    <style>
        body { margin: 0; }

.fixedcolumns {
  column-count: 1;  
}

.fixedsinglecol {
display: flex; 
align-content: center;
justify-content: center; 
align-items: center;
}

#fixedwindow {
    margin: 0 auto;
    align-content: center;
    justify-content: center; 
    align-items: center;
    background-image: url('https://franchises.trellidor.co.za/price-portal/wp-content/uploads/sites/75/2021/07/Fixed-White.png');
    background-image: -webkit-image-set(url('https://franchises.trellidor.co.za/price-portal/wp-content/uploads/sites/75/2021/07/Fixed-White.png'));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 75%;
    max-width: 500px;
    height: auto;
}
#fixedwindowContainer { 
    display: flex; 
    align-content: center;
    justify-content: center; 
    align-items: center;
    font-family: Avenir, sans-serif;
}

.fixedcolour {
    border: 1px solid #BDBDBD;
    border-radius: 100%;
    font-size: 7px;
    margin-top: 10px;
    margin-left: 5px; 
    margin-right: 5px;
    margin-bottom:15px;
    width: 60px;
    height:60px;
    padding: 7px;
}

#fixedcolour1 {
    background-color:#FFFFFF;
    color:#BDBDBD;
  
}

#fixedcolour2 {
    background-color:#4D422D;
    color:#fff;
}

#fixedcolour3 {
    background-color:#EFDAC0;
    color:#fff;
}

#fixedcolour4 {
    background-color:#7C6956;
    color:#fff;
}

#fixedcolour5 {
    background-color:#B5BFC5;
    color:#fff;
}

#fixedcolour6 {
    background-color:#455560;
    color:#fff;
}

#fixedcolour7 {
    background-color:#000018;
    color:#fff;
}
        
    </style>
</head>
<body>
    <div class="fixedcolumns">
    <figure id="fixedwindowContainer">
        <canvas id="fixedwindow" width="500" height="500"></canvas>
    </figure>  
    <div class="fixedsinglecol">
        <button id="fixedcolour1" class="fixedcolour" >Matt White</button>
        <button id="fixedcolour2" class="fixedcolour">Matt Bronze</button>
        <button id="fixedcolour3" class="fixedcolour">Matt Sand</button>
        <button id="fixedcolour4" class="fixedcolour">Matt Light Brown</button>
        <button id="fixedcolour5" class="fixedcolour">Matt Aluminium</button>
        <button id="fixedcolour6" class="fixedcolour">Matt Charcoal</button>
        <button id="fixedcolour7" class="fixedcolour">Matt Black</button>
    </div>

    <script >
      const imgArr = [{
    background: 'https://franchises.trellidor.co.za/price-portal/wp-content/uploads/sites/75/2021/07/Fixed-White.png'
},
{ 
    background: 'Shutter_Bronze.png'
},
{
    background: 'Sand.png'
},
{
    background: 'Light_Brown.png'
},
{
    background: 'Aluminum.png'
},
{
    background: 'Charcoal.png'
},
{
    background: 'https://franchises.trellidor.co.za/price-portal/wp-content/uploads/sites/75/2021/07/Fixed-Black.png'
},
]

const btn = document.querySelectorAll('.fixedcolour'),
fixedwindow = document.querySelector("#fixedwindow"),
fixedwindowCanvas = fixedwindow.getContext('2d'),
    brushRadius = (fixedwindow.width / 100) * 7;

// default image
img = new Image();
img.onload = function () {
    fixedwindowCanvas.drawImage(img, 0, 0, fixedwindow.width, fixedwindow.height);
}
img.src = 'https://franchises.trellidor.co.za/price-portal/wp-content/uploads/sites/75/2021/07/Fixed-White.png'


for (var i = 0; i < imgArr.length; i++) {
    btn[i].setAttribute('data', i);
    btn[i].addEventListener("click", function () {
        myFixedwindow(this);
    });
}

function myFixedwindow(x) {
    var arr = x.getAttribute('data');
    img.src = imgArr[arr].sketch
    fixedwindow.style.background = `url(${imgArr[arr].background})`;
    fixedwindow.style.backgroundSize = 'contain';
    fixedwindow.style.backgroundRepeat = 'no-repeat';
    fixedwindow.style.backgroundPosition = 'center';
    fixedwindowCanvas.clearRect(0, 0, fixedwindow.width, fixedwindow.height);
    fixedwindowCanvas.globalCompositeOperation = "destination-over";
}

    </script>
    </div>
</body>
</html>


  [1]: https://ibb.co/Ct98ggj

【问题讨论】：

在您的 javascript 中，您声明了两次 const imgArr。如果你用const声明一个变量，你以后不能重新声明它（甚至重新分配它）。

标签： javascript html css wordpress

【解决方案1】：

您可能希望隔离您的 javascript 上下文。您在全局上下文中拥有两个小部件的所有代码，我想它会发生冲突。

对于每个小部件，将您的 JS 包装到一个函数中：

 <script>
 function initWidgetA(){

    /// All widget A JS in here

 }
 
 initWidgetA();
 </script>

小部件 B 也是如此：

 <script>
 function initWidgetB(){

    /// All widget B JS in here

 }
 
 initWidgetB();
 </script>

【讨论】：