Question

我在点击功能上遇到了jQuery问题。我无法弄清楚我做错了什么，因为它甚至没有在控制台中注册点击（我设置了断点并拒绝访问我的点击）。我在我的代码的其他区域使用jQuery，所以我认为我已正确链接它，并且我已经多次检查目标以确保它是一个类并且我使用了正确的语法，但我一定错过了一些东西。我觉得我刚看了太长时间。任何帮助将不胜感激。

HTML：

<h3 class="collapseButton leftH3" data-toggle="collapse" data-target=".collapse_me">
    Returns information about the current User 
    <span class="pull-right" id="arrow_me">
        <i class="fa fa-arrow-down" aria-hidden="true"></i>
    </span>
</h3>

JS：

function changeArrows() {
    $('.collapseButton').on("click", function() {
        $(this).next('.pull-right')
          .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
    });
}
changeArrows();

Answer 1

您必须使用children而不是next

function changeArrows() {
    $('.collapseButton').on("click", function() {
       $(this).children('.pull-right')
           .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
    });
}

Answer 2

点击是triggert但你的选择不正确。

$(this).children('.pull-right').html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');

对我来说很好（儿童接下来会改变）

Answer 3

你试过吗

$(document).ready(function(){ 
 changeArrows();
});

Answer 4

好的，重写它以做你想做的事。请注意，您需要next()（获取子元素，而不是children()（使用给定的选择器获取以下兄弟元素） $(this)）。

几乎在每种情况下，

$(this)最终都会解析为h3元素。

$(document).ready(function() {
  $('.collapseButton').on('click', function(event) {
    $(this).children('.pull-right')
      .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
  });
});

Answer 5

尝试将函数体放在$(document).ready( ... )中。运行此函数后，我认为您的事件处理程序不可用。 .next（）也会找到下一个兄弟，但你想要改变的元素是一个孩子。

$(document).ready(function() {
  $('.collapseButton').on("click", function() {
    $(this).children('.fa.fa-arrow-up')
       .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
  });
})

Answer 6

    function changeArrows() {
        $('.collapseButton').on("click", function() {
            $(this).find('.pull-right')
              .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
        });
    }

    changeArrows();

Answer 7

您也可以在不更改i的情况下切换html元素的类：

$(".collapseButton").click(function(e) {
$(this).children('.pull-right').children('.fa-arrow-down').toggleClass('fa-arrow-up');
});

Answer 8

function setVisibility(id1,id2,id3) {
if(document.getElementById('bt1').value=='Show Box 3'){
document.getElementById('bt1').value = 'Show Box 4';
document.getElementById('bt1').value = 'Show Box 5';
document.getElementById(id1).style.display = 'inline';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Show Box 3';
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'inline';
document.getElementById(id3).style.display = 'inline';
}
}

<h4 class="pro_detail_title_name_new" >Product Description
<button type=button name=type id='bt1' onclick="setVisibility('sub3','sub4','sub5');";><span id="sub3" class="mobile-plus1"style="display:inline;" >+ </span><span id="sub5" class="fbutton"style="display:none;">-</span> </button></h4>

<div id="sub4"style="display:none;">-- inside --</div>

jQuery点击麻烦

8 个答案: