wordpress中类似的html元素冲突

tquggr8v  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(237)

我的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
wordpressJavaScriptHtmlcss

1条答案

按热度按时间
tyky79it

tyky79it1#

您可能希望隔离javascript上下文。您在全局上下文中拥有这两个小部件的所有代码，我认为这是相互冲突的。
对于每个小部件，将js Package 成一个函数：

<script>
 function initWidgetA(){

    /// All widget A JS in here

 }

 initWidgetA();
 </script>

小部件b也是如此：

<script>
 function initWidgetB(){

    /// All widget B JS in here

 }

 initWidgetB();
 </script>
赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com