Question

我正在构建一个带有基本jquery的轮播 - 我正在使用#include <iostream> #include <fstream> using namespace std; void writeFile(const char *fileName) { ofstream writeToFile; writeToFile.open(fileName); if (!writeToFile.is_open()) { cout << "Failed to open" << endl; return; } else { string stringToWrite{""}; cout << "Enter text and press return: "; getline(cin, stringToWrite); writeToFile << stringToWrite << endl; cout << "Written successfully" << endl; writeToFile.close(); } } int main() { const char *fileName="test.txt"; writeFile(fileName); return 0; }规则来简单地在每张幻灯片之间切换不透明度。

我想要这样做的方法是点击我想要检查特定类是否存在的每个点，以及它是否隐藏所有其他项并显示该项。到目前为止，我有：

.css()

HTML：

$('.dot').click(function() {
  $('.review-module--reviews').children().css('opacity', 0);
    if ($('.dot').hasClass('dot1')) {
      $('.review-one').css('opacity', 1);
      $('.dot1').addClass('dot-active');
    } else if ($('.dot').hasClass('dot2')) {
      $('.review-two').css('opacity', 1);
      $('.dot2').addClass('dot-active');
    } else {
      $('.review-three').css('opacity', 1);
      $('.dot3').addClass('dot-active');
   }
});

然而，当我点击第2点和第3点时，它总是以DOM中的dot1幻灯片为目标。 <div class="review-module"> <div class="review-module--reviews"> <div class="review-one"> </div> <div class="review-two"> </div> <div class="review-three"> </div> </div> <span class="slider-dots"> <div class="dot dot1"></div> <div class="dot dot2"></div> <div class="dot dot3"></div> </span> </div>类成功添加到dot1，但点击2和3时，该类不会被添加。

我还尝试明确检查if语句中的真值，如下所示：

'dot-active'

这是最好的方法吗？或者我应该考虑一个不同的思考过程？

Answer 1

我建议使用 data-* attributes ，因此请为每个.dot data-review提供引用相关review div的内容：

$('.review-module--reviews div').hide(); //Hide all the slides

$('.dot').click(function() {
    var review = $(this).data('review');

    $('.review-module--reviews div').hide(); //Hide all slides
    $('.slider-dots .dot').removeClass('dot-active');  //Remove 'dot-active' class from all the dots

    $(this).addClass('dot-active'); //Active the clicked dot
    $('.review-'+review).show(); //Show the related slide
});

然后点击，只需使用jQuery方法.data()进行审核，并显示相关类的div。

希望这有帮助。

＆＃13;

$('.review-module--reviews div').hide();

$('.dot').click(function() {
  var review = $(this).data('review');

  $('.review-module--reviews div').hide();
  $('.slider-dots .dot').removeClass('dot-active');

  $(this).addClass('dot-active');
  $('.review-'+review).show();
});

＆＃13;

.dot-active{
  color: green;
  font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="slider-dots">
  <div class="dot dot1" data-review="one">dot1</div>
  <div class="dot dot2" data-review="two">dot2</div>
  <div class="dot dot3" data-review="three">dot3</div>
</span>
<br>
<div class="review-module">
  <div class="review-module--reviews">
    <div class="review-one">
      Review-one
    </div>
    <div class="review-two">
      Review-two
    </div>
    <div class="review-three">
      Review-three
    </div> 
  </div>
</div>

＆＃13;

Answer 2

试试这可能对你有帮助 -

JAVASCRIPT CODE -

$('.dot').click(function() {
  $('.review-module--reviews').children().css('opacity', 0);
  $('.dot').removeClass('dot-active');
    if ($(this).hasClass('dot1')) {
      $('.review-one').css('opacity', 1);
      $(this).addClass('dot-active');
    } else if ($(this).hasClass('dot2')) {
      $('.review-two').css('opacity', 1);
      $(this).addClass('dot-active');
    } else {
      $('.review-three').css('opacity', 1);
      $(this).addClass('dot-active');
   }
});

Answer 3

错误在此代码中：

operator>>(example&, int&)

您在此处实际执行的操作是获取所有if ($('.dot').hasClass('dotX'))元素的列表，并检查第一个元素是否具有.dot类。您可以想象，这将始终选择第一个dotX元素，该元素具有.dot类。

您可能要做的是检查点击的元素是否具有dot1类，您只需要检查该元素。

使用点击处理程序的当前范围来执行此操作：

dotX

或通过检查点击事件的目标：

if ($(this).hasClass('dotX'))

单击jQuery轮播点总是转到第一项

3 个答案: