0

我想在没有 .parent 的情况下重建它，因为我在 wordpress 中连接它时遇到了麻烦。我想在 js 中添加和删除特定类而不使用父类。将父级更改为特定类。我怎么能这样做？我可以在 js 中没有 .parent 函数的情况下保存它的功能吗？

var $contents = $('.tab-content');

$contents.slice().hide();

$('.tab').click(function() {
	removeNewClass();
  
  var id = this.id;
  var $target = $('#' + id + 'show').show();
  var newClass = 'long';

  $(this).hide().parent().addClass(newClass);
  $('.tab').show();
  $contents.not($target).hide();
});

$('.close').click(function() {
	removeNewClass();

  $(this).parent().hide();
  $(this).parent().prev('.tab').show();

  var $target = $(this).parent();
});

function removeNewClass(){
  $contents.each(function() {
  	var id = $(this).attr('id');
    var postClass = 'post' + id.split('tab')[1];
    console.log( postClass );
    $(this).parent().attr("class", postClass);
  });
}
.tab {
  background: red;
  max-width: 100px;
  cursor: pointer;
}

.close {
  border: 1px solid red;
  max-width: 100px;
  cursor: pointer;
}
.long {border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
  <div id="tab1" class="tab">Show 1</div>
  <div id="tab1show" class="tab-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
    <div class="close">close</div>
  </div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
  <div id="tab2" class="tab">Show 2</div>
  <div id="tab2show" class="tab-content">
    content 2
    <div class="close">close</div>
  </div>
</div>

4

2 回答 2

1

那是你要找的吗？

var $contents = $('.tab-content');

$contents.slice().hide();

$('.tab').click(function() {
	removeNewClass();
  
  var id = this.id;
  var $target = $('#' + id + 'show').show();
  var newClass = 'long';

  $('.tab').show();

  $(this).hide()[0].parentNode.classList.add(newClass);

  $contents.not($target).hide();
});

$('.close').click(function() {
  removeNewClass();

  var parent = $(this.parentNode);

  parent
    .hide()
    .prev('.tab')
    .show();
});

function removeNewClass(){
  $contents.each(function() {
  	var id = $(this).attr('id');
    var postClass = 'post' + id.split('tab')[1];
    console.log( postClass );
    $(this.parentNode).attr("class", postClass);
  });
}
.tab {
  background: red;
  max-width: 100px;
  cursor: pointer;
}

.close {
  border: 1px solid red;
  max-width: 100px;
  cursor: pointer;
}
.long {border: 1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
<h2>Title 1</h2>
<div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
  <div id="tab1" class="tab">Show 1</div>
  <div id="tab1show" class="tab-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
    <div class="close">close</div>
  </div>
</div>
<div class="post2">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
  <div id="tab2" class="tab">Show 2</div>
  <div id="tab2show" class="tab-content">
    content 2
    <div class="close">close</div>
  </div>
</div>

于 2018-08-09T19:11:56.230 回答
1

我最近遇到了类似的问题，在使用.parent(). 为了解决这个问题，我使用了数据属性。

更具体地说，我data-target在关闭按钮上设置了一个属性，该属性包含对我想要关闭的元素的查询。然后可以轻松地将这个查询传递给 jQuery，以在页面上找到您想要的确切元素。与使用相对元素相比，它更加准确和一致。

var $contents = $('.tab-content');
$contents.hide();

var newClass = 'long';

$('.tab').click(function() {
  var $target = $($(this).data('target'));

  $target.addClass(newClass);

  $target.find('.tab-content').show();
  $target.find('.tab').hide();
});

$('.close').click(function() {
  var $target = $($(this).data('target'));

  $target.removeClass(newClass);

  $target.find('.tab-content').hide();
  $target.find('.tab').show();
});
.tab {
  background: red;
  max-width: 100px;
  cursor: pointer;
}

.close {
  border: 1px solid red;
  max-width: 100px;
  cursor: pointer;
}

.long {
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1">
  <h2>Title 1</h2>
  <div class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, optio.</div>
  <div id="tab1" class="tab" data-target=".post1">Show 1</div>
  <div id="tab1show" class="tab-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium deserunt vel in.</p>
    <div class="close" data-target=".post1">close</div>
  </div>
</div>
<div class="post2">
  <h2>Title 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae non sequi, itaque?</p>
  <div id="tab2" class="tab" data-target=".post2">Show 2</div>
  <div id="tab2show" class="tab-content">
    content 2
    <div class="close" data-target=".post2">close</div>
  </div>
</div>

于 2018-08-09T19:25:03.357 回答