单击元素时未触发 jQuery 单击事件

问题描述 投票：0回答：1

我之前见过这个问题并得到了回答，但在尝试了几种建议的解决方案后，我仍然没有任何运气。

我有四个按钮（分别带有 ID 的“第一个、上一个、下一个、最后一个”），单击时它们都不会执行任何操作。目前我的代码中不起作用的部分看起来像这样：


const index = ['imgs/1.png', 'imgs/2.png', 'imgs/3.png', 'imgs/4.png', 'imgs/5.png'];

let current = index.length;

$(document).ready(function(){
   $(document).on('click', '#frst', function(){
        current = 1;
        funcUpdate();
    });

    $(document).on('click', '#prev', function(){
        current--;
        funcUpdate();
    });

    $(document).on('click', '#next', function(){
        current++;
            funcUpdate();
    });

    $(document).on('click', '#last', function(){
        current = index.length;
        funcUpdate();
    });

});

function funcUpdate() {
    $('#img').attr('src', index[current - 1]);;
    $('button').removeAttr('disabled');

    if (current == 1) {
        $('.back').attr('disabled', '1');
    }
    else if (current == index.length) {
        $('.frwd').attr('disabled', '1');
    }
}

我的 html 看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="imgs.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    </head>
    <body>
            <div>
                <img id="comic" src="imgs/5.png"/>
                <div class="center">
                    <button type="button" class="back" id="frst">🞀🞀</button>
                    <button type="button" class="back" id="prev">🞀</button>
                    <button type="button" class="frwd" id="next">🞂</button>
                    <button type="button" class="frwd" id="last">🞂🞂</button>
                </div>
            </div>
        </main>
     </body>
</html>

funcUpdate 的目的是切换显示的图像并禁用按钮，这样您就无法超出数组中当前的值。当我不使用 jQuery 时，如下所示，它会按预期工作。

<button class="back" onclick="funcFrst()">first</button>
<button class="back" onclick="funcPrev()">previous</button>
<button class="back" onclick="funcNext()">next</button>
<button class="back" onclick="funcLast()">last</button>

imgs.js 中的代码如下：

function funcFrst() {
    current = 1;
    funcUpdate();
}

function funcPrev() {
    current--;
    funcUpdate();
}

function funcNext() {
    current++;
    funcUpdate();
}

function funcLast() {
    current = index.length;
    funcUpdate();
}

在这两种情况下，js 都在 imgs.js 中。

我也尝试过

$('#ID').click
和
$('#ID').on('click', function(){});
，分别在
$(document).ready
内外，但都没有运气。我还看到建议将脚本放在调用它的按钮下方，但这也不起作用。

我打赌这可能是我忽略的一些非常明显的错误，但我想我还是会问。

javascript jquery click jquery-events
1个回答
0
投票

a) 您需要先添加基本 jQuery 库，然后再添加任何其他 jQuery 库文件，然后只有您的 jQuery 代码会运行。所以交换添加的2个js文件的位置。

b) 另外，您需要在 

funcUpdate()
else if 条件中再添加一行。

$('.back').removeAttr('disabled'); // so that when last image reached back button got enabled

c）另外

$('#img').attr(
需要是
$('#comic').attr(
[我希望这是一个打字错误]

工作片段：

let current = 1;
const index = ['https://previews.123rf.com/images/kamchatka/kamchatka1005/kamchatka100500301/6937927-zebras-on-lake.jpg', 'https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg', 'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg'];
$(document).ready(function() {
  $(document).on('click', '#frst', function() {
    current = 1;
    funcUpdate();
  });

  $(document).on('click', '#prev', function() {
    current--;
    funcUpdate();
  });

  $(document).on('click', '#next', function() {
    current++;
    funcUpdate();
  });

  $(document).on('click', '#last', function() {
    current = index.length;
    funcUpdate();
  });

});

function funcUpdate(buttonObj) {
  $('#comic').attr('src', index[current - 1]);
  if (current == 1) {
    $('.back').attr('disabled', '1');
  } else if (current == index.length) {
    $('.frwd').attr('disabled', '1');
    $('.back').removeAttr('disabled');
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="imgs.js"></script>
</head>

<body>
  <div>
    <img id="comic" src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" height="100" width="100" />
    <div class="center">
      <button type="button" class="back" id="frst">🞀🞀</button>
      <button type="button" class="back" id="prev">🞀</button>
      <button type="button" class="frwd" id="next">🞂</button>
      <button type="button" class="frwd" id="last">🞂🞂</button>
    </div>
  </div>
  </main>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.