Question

如果在第一个div上检测到点击，它将删除第二个div上的一个类，以便它的内容可见。

HTML

<div id="pp-post-{post_id}" class="pp-post"></div>

<div id="pp-post-container-{post_id}" class="pp-post-container element-invisible"></div>

的JavaScript

$(function() {
  $('.pp-post-item').on('click', function() {
    let postFullId = jQuery(this).attr('id');
    let postNumId = postFullId.slice(13);
    $('.pp-post-container').not('.element-invisible').addClass('element-invisible');
    $('#pp-post-container-' + postNumId).removeClass('element-invisible');
  });

这一切都适用于Chrome。但它在IE，FireFox或Chrome中不起作用，也不确定原因。

任何见解都将受到赞赏。

Answer 1

.pp-post-item与引用的HTML中的任何元素都不匹配。我假设你想要.pp-post和.slice(8)而不是.slice(13)。如果您进行了这些更改，则适用于Chrome，Firefox和IE11：

$(function() {
  $('.pp-post').on('click', function() {
    let postFullId = jQuery(this).attr('id');
    let postNumId = postFullId.slice(8);
    $('.pp-post-container').not('.element-invisible').addClass('element-invisible');
    $('#pp-post-container-' + postNumId).removeClass('element-invisible');
  });
});

.element-invisible {
  display: none;
}

<div id="pp-post-1" class="pp-post">div 1</div>
<div id="pp-post-container-1" class="pp-post-container element-invisible">container 1</div>

<div id="pp-post-2" class="pp-post">div 2</div>
<div id="pp-post-container-2" class="pp-post-container element-invisible">container 2</div>

<div id="pp-post-3" class="pp-post">div 3</div>
<div id="pp-post-container-3" class="pp-post-container element-invisible">container 3</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.removeClass（）无法在IE和FireFox中运行

1 个答案: