javascript - 当我将它们放在旋转木马外面时，按钮不起作用-6ren

javascript - 当我将它们放在旋转木马外面时，按钮不起作用

转载作者：行者123 更新时间：2023-12-03 06:55:21

我有这个代码，当我把 anchor (箭头img)放在外面时，.MultiCarousel div 它不起作用。我没有编写代码，但我认为我应该在 JavaScript 中更改一些内容。我想要容器 div 之外的 anchor ，但具有相同的功能。我对 JavaScript 不是很熟悉，所以我不知道要改变什么。有人可以帮忙吗？

$(document).ready(function () {
    var itemsMainDiv = ('.MultiCarousel');
    var itemsDiv = ('.MultiCarousel-inner');
    var itemWidth = "";

    $('.leftLst, .rightLst').click(function () {
        var condition = $(this).hasClass("leftLst");
        if (condition)
            click(0, this);
        else
            click(1, this)
    });

    ResCarouselSize();

    $(window).resize(function () {
        ResCarouselSize();
    });

    //this function define the size of the items
    function ResCarouselSize() {
        var incno = 0;
        var dataItems = ("data-items");
        var itemClass = ('.item');
        var id = 0;
        var btnParentSb = '';
        var itemsSplit = '';
        var sampwidth = $(itemsMainDiv).width();
        var bodyWidth = $('body').width();
        $(itemsDiv).each(function () {
            id = id + 1;
            var itemNumbers = $(this).find(itemClass).length;
            btnParentSb = $(this).parent().attr(dataItems);
            itemsSplit = btnParentSb.split(',');
            $(this).parent().attr("id", "MultiCarousel" + id);

            if (bodyWidth >= 1200) {
                incno = itemsSplit[3];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 992) {
                incno = itemsSplit[2];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 768) {
                incno = itemsSplit[1];
                itemWidth = sampwidth / incno;
            }
            else {
                incno = itemsSplit[0];
                itemWidth = sampwidth / incno;
            }
            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
            $(this).find(itemClass).each(function () {
                $(this).outerWidth(itemWidth);
            });

            $(".leftLst").addClass("over");
            $(".rightLst").removeClass("over");

        });
    }


    //this function used to move the items
    function ResCarousel(e, el, s) {
        var leftBtn = ('.leftLst');
        var rightBtn = ('.rightLst');
        var translateXval = '';
        var divStyle = $(el + ' ' + itemsDiv).css('transform');
        var values = divStyle.match(/-?[\d\.]+/g);
        var xds = Math.abs(values[4]);
        if (e == 0) {
            translateXval = parseInt(xds) - parseInt(itemWidth * s);
            $(el).siblings(rightBtn).removeClass("over");

            if (translateXval <= itemWidth / 2) {
                translateXval = 0;
                $(el).siblings(leftBtn).addClass("over");
            }
        }
        else if (e == 1) {
            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
            translateXval = parseInt(xds) + parseInt(itemWidth * s);
            $(el).siblings(leftBtn).removeClass("over");

            if (translateXval >= itemsCondition - itemWidth / 2) {
                translateXval = itemsCondition;
                $(el).siblings(rightBtn).addClass("over");
            }
        }
        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
    }

    //It is used to get some elements from btn
    function click(ell, ee) {
        var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
        var slide = $(Parent).attr("data-slide");
        ResCarousel(ell, Parent, slide);
    }
});

.MultiCarousel { 
    float: left; 
    overflow: hidden;
    padding: 15px; 
    width: 100%; 
    position:relative; 
    box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left; 
}
.MultiCarousel .MultiCarousel-inner .item { 
    float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div { 
    text-align: center;
    padding:10px;
    margin:10px;  
    color:#666;
}
.leftLst, .rightLst { 
    position:absolute;
    border-radius:50%;
    top:calc(50% - 20px);
    background: red;
    width: 50px;
    height: 50px;
}
.leftLst {
    left:0; 
}
.rightLst {
    right:0; 
}

.leftLst.over,  .rightLst.over {
    pointer-events: none; 
    background:#ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
      <div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel"  data-interval="1000">
              <div class="MultiCarousel-inner">
                  <div class="item">
                        <div class="col-xl-3 pad15">
                          <img src="images/cert4.png" class="d-block w-100" alt="...">
                          <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                      </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15"> 
                      <img src="images/cert2.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert3.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                  </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert7.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                  </div> 
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert4.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                  </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15"> 
                      <img src="images/cert2.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert3.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                  </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert7.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                  </div> 
                  </div>
              </div>
              <a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
              <a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
          </div>
       
    </div>
  
  </div>

最佳答案

问题是 click()函数正在搜索箭头键按钮的父元素，它预计是 .MultiCarousel div 以使其余代码正常工作。因此，当您将箭头键放在 .MultiCarousel 之外时div 将找到不同的父级，并且您的 slider 将不起作用。
在这种情况下，您可以使用 jQuery siblings()查找.MultiCarousel的函数div，因为箭头键按钮现在是兄弟。ResCarousel() 也是如此。功能。它希望箭头键按钮是 .MultiCarousel 的子级。分区。所以你也可以使用siblings()这里。

$(document).ready(function () {
    var itemsMainDiv = ('.MultiCarousel');
    var itemsDiv = ('.MultiCarousel-inner');
    var itemWidth = "";

    $('.leftLst, .rightLst').click(function () {
        var condition = $(this).hasClass("leftLst");
        if (condition)
            click(0, this);
        else
            click(1, this)
    });

    ResCarouselSize();

    $(window).resize(function () {
        ResCarouselSize();
    });

    //this function define the size of the items
    function ResCarouselSize() {
        var incno = 0;
        var dataItems = ("data-items");
        var itemClass = ('.item');
        var id = 0;
        var btnParentSb = '';
        var itemsSplit = '';
        var sampwidth = $(itemsMainDiv).width();
        var bodyWidth = $('body').width();
        $(itemsDiv).each(function () {
            id = id + 1;
            var itemNumbers = $(this).find(itemClass).length;
            btnParentSb = $(this).parent().attr(dataItems);
            itemsSplit = btnParentSb.split(',');
            $(this).parent().attr("id", "MultiCarousel" + id);

            if (bodyWidth >= 1200) {
                incno = itemsSplit[3];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 992) {
                incno = itemsSplit[2];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 768) {
                incno = itemsSplit[1];
                itemWidth = sampwidth / incno;
            }
            else {
                incno = itemsSplit[0];
                itemWidth = sampwidth / incno;
            }
            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
            $(this).find(itemClass).each(function () {
                $(this).outerWidth(itemWidth);
            });

            $(".leftLst").addClass("over");
            $(".rightLst").removeClass("over");

        });
    }


    //this function used to move the items
    function ResCarousel(e, el, s) {
        var leftBtn = ('.leftLst');
        var rightBtn = ('.rightLst');
        var translateXval = '';
        var divStyle = $(el + ' ' + itemsDiv).css('transform');
        var values = divStyle.match(/-?[\d\.]+/g);
        var xds = Math.abs(values[4]);
        if (e == 0) {
            translateXval = parseInt(xds) - parseInt(itemWidth * s);
            $(el).siblings(rightBtn).removeClass("over");

            if (translateXval <= itemWidth / 2) {
                translateXval = 0;
                $(el).siblings(leftBtn).addClass("over");
            }
        }
        else if (e == 1) {
            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
            translateXval = parseInt(xds) + parseInt(itemWidth * s);
            $(el).siblings(leftBtn).removeClass("over");

            if (translateXval >= itemsCondition - itemWidth / 2) {
                translateXval = itemsCondition;
                $(el).siblings(rightBtn).addClass("over");
            }
        }
        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
    }

    //It is used to get some elements from btn
    function click(ell, ee) {
        var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
        var slide = $(Parent).attr("data-slide");
        ResCarousel(ell, Parent, slide);
    }
});

.MultiCarousel { 
    float: left; 
    overflow: hidden;
    padding: 15px; 
    width: 100%; 
    position:relative; 
    box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left; 
}
.MultiCarousel .MultiCarousel-inner .item { 
    float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div { 
    text-align: center;
    padding:10px;
    margin:10px;  
    color:#666;
}
.leftLst, .rightLst { 
    position:absolute;
    border-radius:50%;
    top:calc(50% - 20px);
    background: red;
    width: 50px;
    height: 50px;
}
.leftLst {
    left:0; 
}
.rightLst {
    right:0; 
}

.leftLst.over,  .rightLst.over {
    pointer-events: none; 
    background:#ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
            </div>
        </div>

        <a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
        <a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>

    </div>
</div>

替代解决方案
您的问题明确指出您想将箭头键按钮放在 .MultiCarousel 之外。 div 但我认为将它们保留在 div 中可能会更好，因为它可以作为整个轮播的包装器。
然后您可以使用 closest()查找 .MultiCarousel的函数 click() 中的 div函数和 find()查找 ResCarousel() 中的按钮的功能功能。
这样，按钮始终连接到正确的 slider ，例如，当您想要使用多个彼此相邻的 slider 时，如下例所示。

$(document).ready(function () {
    var itemsMainDiv = ('.MultiCarousel');
    var itemsDiv = ('.MultiCarousel-inner');
    var itemWidth = "";

    $('.leftLst, .rightLst').click(function () {
        var condition = $(this).hasClass("leftLst");
        if (condition)
            click(0, this);
        else
            click(1, this)
    });

    ResCarouselSize();

    $(window).resize(function () {
        ResCarouselSize();
    });

    //this function define the size of the items
    function ResCarouselSize() {
        var incno = 0;
        var dataItems = ("data-items");
        var itemClass = ('.item');
        var id = 0;
        var btnParentSb = '';
        var itemsSplit = '';
        var sampwidth = $(itemsMainDiv).width();
        var bodyWidth = $('body').width();
        $(itemsDiv).each(function () {
            id = id + 1;
            var itemNumbers = $(this).find(itemClass).length;
            btnParentSb = $(this).parent().attr(dataItems);
            itemsSplit = btnParentSb.split(',');
            $(this).parent().attr("id", "MultiCarousel" + id);

            if (bodyWidth >= 1200) {
                incno = itemsSplit[3];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 992) {
                incno = itemsSplit[2];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 768) {
                incno = itemsSplit[1];
                itemWidth = sampwidth / incno;
            }
            else {
                incno = itemsSplit[0];
                itemWidth = sampwidth / incno;
            }
            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
            $(this).find(itemClass).each(function () {
                $(this).outerWidth(itemWidth);
            });

            $(".leftLst").addClass("over");
            $(".rightLst").removeClass("over");

        });
    }


    //this function used to move the items
    function ResCarousel(e, el, s) {
        var leftBtn = ('.leftLst');
        var rightBtn = ('.rightLst');
        var translateXval = '';
        var divStyle = $(el + ' ' + itemsDiv).css('transform');
        var values = divStyle.match(/-?[\d\.]+/g);
        var xds = Math.abs(values[4]);
        if (e == 0) {
            translateXval = parseInt(xds) - parseInt(itemWidth * s);
            $(el).find(rightBtn).removeClass("over");

            if (translateXval <= itemWidth / 2) {
                translateXval = 0;
                $(el).find(leftBtn).addClass("over");
            }
        }
        else if (e == 1) {
            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
            translateXval = parseInt(xds) + parseInt(itemWidth * s);
            $(el).find(leftBtn).removeClass("over");

            if (translateXval >= itemsCondition - itemWidth / 2) {
                translateXval = itemsCondition;
                $(el).find(rightBtn).addClass("over");
            }
        }
        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
    }

    //It is used to get some elements from btn
    function click(ell, ee) {
        var Parent = "#" + $(ee).closest( '.MultiCarousel' ).attr("id");
        var slide = $(Parent).attr("data-slide");
        ResCarousel(ell, Parent, slide);
    }
});

.MultiCarousel { 
    float: left; 
    overflow: hidden;
    margin: 5%; 
    width: 40%; 
    position:relative; 
    box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left; 
}
.MultiCarousel .MultiCarousel-inner .item { 
    float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div { 
    text-align: center;
    padding:10px;
    margin:10px;  
    color:#666;
}
.leftLst, .rightLst { 
    /*position:absolute;*/
    border-radius:50%;
    /*top:calc(50% - 20px);*/
    background: red;
    width: 50px;
    height: 50px;
    display: block;
}
.leftLst {
    float: left; 
}
.rightLst {
    float: right;
}

.leftLst.over,  .rightLst.over {
    pointer-events: none; 
    background:#ccc;
}

.buttons {
    width: 100%;
    clear:both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        
        <div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
            </div>
            <div class="buttons">
                <a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
                <a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
            </div>
        </div>

        <div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
            </div>
            <div class="buttons">
                <a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
                <a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
            </div>
        </div>

    </div>
</div>

关于javascript - 当我将它们放在旋转木马外面时，按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64118656/

文章推荐： javascript - 在 onCopy 钩子(Hook)(插件)中获取复制的内容

文章推荐： javascript - 使用 API 调用创建 yeoman 生成器

文章推荐： javascript - 使用 Jest 测试类组件 firebase 操作

按钮
所以我有这个 javascript 片段，它有两个按钮可以进入全屏，一个按钮可以退出全屏。我想做到这一点，如果我不在全屏模式下，按钮会显示转到全屏模式，而当我处于全屏模式时，按钮会显示退出全屏模式..
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
javascript - “给我发推文”按钮 - JavaScript 按钮
我尝试将 Twitter 上的“Tweet Me”按钮 ( http://twitter.com/goodies/tweetbutton ) 添加到我的网站。然而，每当按下按钮时，我都会收到此 Jav
javascript - html - <输入类型=按钮> 和 <按钮>
我试图在我的文本区域中获取一个按钮值，如果我使用则工作正常但如果我使用那么它就不起作用了。你能找出问题所在吗？ HTML 1 2 3 4 JavaScript $(document).read
c# - 如何根据调用方法的调用(按钮)发送者(按钮#)操作变量名称？
我的 C# Winform 面板中有一堆文本框。每行文本框的命名如下: tb1 tbNickName1 comboBox1 tb2 tbNickName2 comboBox2 tb3 tbNickNa
javascript - 隐藏 'Clear' 按钮，直到单击 'Apply' 按钮
我有一个表单，其中过滤器下方有按钮(应用过滤器和清除过滤器)，我试图在单击“应用”按钮时显示“清除”，并在单击“清除”按钮时隐藏“清除”按钮。下面的代码(如果我的表有的话):
javascript - 我有一个 Excel 按钮，我想在数据表中添加 pdf 按钮
excel 按钮正在工作，但是当我添加 pdf 按钮时，它添加仅显示 pdf 按钮 excel 按钮在 pdf 按钮添加后隐藏 $(document).ready(function() { $
html - 将标题分为移动应用程序的 3 列(按钮、标题、按钮)
我想创建一个 div 作为标题并分成 3 列，并按以下顺序在其中放置 2 个按钮和一个标题:Button1(左位) Title(居中) Button2(右位) 这是我为这个 div 编写的代码:
javascript - 即使有一个框未选中，如何禁用“允许”按钮？仅当选中所有复选框时才应启用“允许”按钮？
仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮
php - 在我的网站中开发“点赞”按钮，而不是添加 Facebook“点赞”按钮
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
java - 在 JSF2 中呈现 HTML5 按钮(按钮、重置和提交)
如您所知，您可以使用 2 种方法在 HTML5 中呈现按钮: 使用 void 元素或如果您需要内容，请使用元素(不是空元素)。在JSF2中，有2种方式生成按钮；与UICommand或 UIOu
jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
android - 如何使用 ActionDone 按钮(不带 Enter 按钮)实现多行 EditText
我有用于在消息(电子邮件、短信)上输入内容的 EditText。我希望在单击 ActionDone 按钮时立即发布消息。我为此使用以下代码: message.setOnEditorActionList
android - 如何禁用 EditText 软件键盘上的 "Next"按钮(替换为 "Done"按钮)
我的 Android 应用程序中有一堆 EditText，每个都将 InputMethod 设置为 numberSigned。我的目标设备没有硬件键盘，而是使用软件键盘输入数字。 Android 将输
java - 无法以编程方式隐藏弧形菜单中的 fab 按钮。尝试了 upload.hide();无法弄清楚如何隐藏 fab 按钮
我无法以编程方式隐藏弧形菜单中的 fab 按钮。我正在使用https://github.com/saurabharora90/MaterialArcMenu在我的代码中。如何在Java中以编程方式隐藏
java - 有没有办法在 JOptionPane showInputDialog 中只有 OK 按钮(没有 CANCEL 按钮)？
我已经看到这在其他类型的对话框窗口中是可能的，例如“showConfirmDialog”，其中可以指定按钮的数量及其名称；但是使用“showInputDialog”时是否可以实现相同的功能？我似乎无法
java - 如何通过 Selenium 和 Java 单击“停用”按钮，然后单击“激活”按钮
相同的按钮用于激活和停用。第一次，当代码运行按钮单击并成功“停用”时。但第二次，代码无法找到该元素。第一个案例按钮位于第二个“a”标签中，然后停用第一个“a”标签中的按钮。案例1: Edit
JavaScript 按钮
是否可以将按钮的 onclick 操作设置为 JavaScript 变量？这个想法是我们用 JavaScript 控制一个表。每当点击该表的一行时，我们就会更新一个 JavaScript 变量。该 v
android自定义控件(按钮)
我想创建一个按钮，它包含左侧的文本和右侧的复选框(或任何其他组件)。我怎样才能做到这一点？我发现我可以制作自己的 View extends Button，但是如果可以的话我应该如何实现 onDraw

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当我将它们放在旋转木马外面时，按钮不起作用