Question

我无法使response = requests.get(...) with open(local_filename, 'wb') as f: for chunk in response.iter_content(chunk_size=1024): if chunk: f.write(chunk) f.flush() html_file = BeautifulSoup(open(html_file_dir), "html.parser")函数对单个元素起作用。我的功能是滑块。当我将一个滑块放在jQuery上时，它工作正常，没有问题。但是，每当我尝试放置第二个滑块时，它都无法正常工作。第一个滑块控制这两个控件，然后第二个滑块负责充电，如果我单击向右箭头的次数过多等。

这是我的html代码：

jQuery

这是我使用的地方：

$('.right-arrow').click(function () {
    var currentSlide = $('.slide.active');
    var nextSlide = currentSlide.next();

    currentSlide.fadeOut(300).removeClass('active');
    nextSlide.fadeIn(300).addClass('active');

    if (nextSlide.length == 0) {
        $('.slide').first().fadeIn(300).addClass('active');
    }
});

$('.left-arrow').click(function() {
    var currentSlide = $('.slide.active');
    var prevSlide = currentSlide.prev();

    currentSlide.fadeOut(300).removeClass('active');
    prevSlide.fadeIn(300).addClass('active');

    if (prevSlide.length == 0) {
        $('.slide').last().fadeIn(300).addClass('active');
    }
});

就像我之前说过的那样，当我单击第一个滑块的向右箭头时，将显示第一个滑块的<style> .slide { display:none; } .slide.active { display:block; } </style> <div class="slider-container"> <div id="slider1"> <div class="slide active">#1</div> <div class="slide">#2</div> <div class="slide">#3</div> </div> <p class="left-arrow"><</p> <p class="right-arrow">></p> </div> <div class="slider-container"> <div id="slider2"> <div class="slide active">#a</div> <div class="slide">#b</div> <div class="slide">#c</div> </div> <p class="left-arrow"><</p> <p class="right-arrow">></p> </div>和第二个滑块的#2。

Answer 1

由于行而出现此行为

var currentSlide = $('.slide.active');

会选择具有slide和active类的所有元素。尝试用以下内容替换该行：

var currentSlide = $(this).parent().find('.slide.active');

这是在选择在$（this）上触发事件的元素。然后获取该元素的父元素，然后在该元素中找到活动幻灯片。

编辑这是您的第一个if语句的示例。再一次，您要获取引起事件的元素的父元素，然后在dom元素内搜索所有带有“ slide”类的元素。

作为旁注，您可能希望将$（this）设为类似var $ this = $（this）的变量。然后使用$ this代替$（this）。您可能会或可能不会在意性能问题。

if (nextSlide.length == 0) {
    $(this).parent().find('.slide').first().fadeIn(300).addClass('active');

}

Answer 2

正如提到的其他答案和评论一样，您正在搜索整个文档中的.slide元素。相反，您需要将搜索限制在相关的.slider-container元素内。为此，您可以使用JQuery.closest()。另外，最好在显示新的fadeOut元素之前等待.slide动画完成使用complete回调函数的操作。您可以以下一个示例作为实现的参考：

$('.right-arrow').click(function()
{
    var container = $(this).closest(".slider-container");
    var currSlide = container.find('.slide.active');
    var nextSlide = currSlide.next(".slide");

    if (nextSlide.length === 0)
        nextSlide = container.find('.slide:first-child');

    currSlide.fadeOut(300, function()
    {
        $(this).removeClass('active');
        nextSlide.fadeIn(300).addClass('active');
    });
});

$('.left-arrow').click(function()
{
    var container = $(this).closest(".slider-container");
    var currSlide = container.find('.slide.active');
    var prevSlide = currSlide.prev(".slide");
    
    if (prevSlide.length === 0)
        prevSlide = container.find('.slide:last-child');

    currSlide.fadeOut(300, function()
    {
        $(this).removeClass('active');
        prevSlide.fadeIn(300).addClass('active');
    });
});

.slide {
    display:none;
}
.slide.active {
    display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider-container">
  <div id="slider1">
    <div class="slide active">#1</div>
    <div class="slide">#2</div>
    <div class="slide">#3</div>
  </div>
  <p class="left-arrow">&lt;</p>
  <p class="right-arrow">&gt;</p>
</div>

<div class="slider-container">
  <div id="slider2">
    <div class="slide active">#a</div>
    <div class="slide">#b</div>
    <div class="slide">#c</div>
  </div>
  <p class="left-arrow">&lt;</p>
  <p class="right-arrow">&gt;</p>
</div>

如何分别为多个元素运行jQuery函数？

2 个答案: