我如何用我当前的代码实现Jquery切换功能?

Question

我的代码如下:

$("#1").click(function() {
$("#active1").toggle();
});
$("#2").click(function() {
$("#active2").toggle();
});

<div class="carouselTypo">
<p class="carouselTypo__p" id="1">A</p>
<p class="carouselTypo__p" id="2">B</p>
<p class="carouselTypo__p" id="3">C</p>
<p class="carouselTypo__p" id="4">D</p>
<p class="carouselTypo__p" id="5">E</p>
</div>
<hr>
<div id="active1" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor officia quae, quisquam minus beatae a error corrupti officiis velit? Sit.</p>
</div>
<div id="active2" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, illo.</p>
</div>
<div id="active3" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo reprehenderit accusantium saepe voluptate deleniti excepturi delectus aut, libero accusamus magnam nam architecto vero dolorum illo culpa vitae. Necessitatibus nam saepe mollitia eveniet.</p>
</div>
<div id="active4" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
</div>
<div id="active5" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, porro ipsa neque quas exercitationem debitis?</p>
</div>

我想要实现的是在单击某个p类(带ID)时显示某个div。我尝试使用Jquery中的toggle函数，它可以工作，但它总是添加另一个div来显示。

Answer 1

你可以这样做:

$(".carouselTypo__p").click(function(){
var id = $(this).attr("id")
$("#active" + id).toggle();
})

$(".carouselTypo__p").click(function(){
var id = $(this).attr("id")
$("#active" + id).toggle();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carouselTypo">
<p class="carouselTypo__p" id="1">A</p>
<p class="carouselTypo__p" id="2">B</p>
<p class="carouselTypo__p" id="3">C</p>
<p class="carouselTypo__p" id="4">D</p>
<p class="carouselTypo__p" id="5">E</p>
</div>
<hr>
<div id="active1" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor officia quae, quisquam minus beatae a error corrupti officiis velit? Sit.</p>
</div>
<div id="active2" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, illo.</p>
</div>
<div id="active3" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo reprehenderit accusantium saepe voluptate deleniti excepturi delectus aut, libero accusamus magnam nam architecto vero dolorum illo culpa vitae. Necessitatibus nam saepe mollitia eveniet.</p>
</div>
<div id="active4" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
</div>
<div id="active5" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, porro ipsa neque quas exercitationem debitis?</p>
</div>

虽然上面的解决方案不是最好的，所以我建议这样做。

演示2

$(".carouselTypo__p").click(function() {
var id = $(this).attr("data-id")
$(".activeingreds").hide();
$("#" + id).toggle();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carouselTypo">
<p class="carouselTypo__p" data-id="active1">A</p>
<p class="carouselTypo__p" data-id="active2">B</p>
<p class="carouselTypo__p" data-id="active3">C</p>
<p class="carouselTypo__p" data-id="active4">D</p>
<p class="carouselTypo__p" data-id="active5">E</p>
</div>
<hr>
<div id="active1" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor officia quae, quisquam minus beatae a error corrupti officiis velit? Sit.</p>
</div>
<div id="active2" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, illo.</p>
</div>
<div id="active3" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo reprehenderit accusantium saepe voluptate deleniti excepturi delectus aut, libero accusamus magnam nam architecto vero dolorum illo culpa vitae. Necessitatibus nam saepe mollitia eveniet.</p>
</div>
<div id="active4" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
</div>
<div id="active5" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, porro ipsa neque quas exercitationem debitis?</p>
</div>

Answer 2

在HTML中没有#active1或#active2元素，但似乎有#active3或更高，所以我认为这只是一个打字错误。

关于这个问题，要DRY逻辑，您可以在p元素上使用data属性，这些元素被单击以瞄准要显示的.activeingreds元素，同时隐藏其他元素。试试这个:

let $activeingreds = $('.activeingreds');
$('.carouselTypo__p').on('click', e => {
$activeingreds.hide().filter(e.target.dataset.target).show();
});

.activeingreds { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carouselTypo">
<p class="carouselTypo__p" data-target="#active1">A</p>
<p class="carouselTypo__p" data-target="#active2">B</p>
<p class="carouselTypo__p" data-target="#active3">C</p>
<p class="carouselTypo__p" data-target="#active4">D</p>
<p class="carouselTypo__p" data-target="#active5">E</p>
</div>
<hr>
<div id="active1" class="activeingreds">
<p class="activeingreds__p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor officia quae, quisquam minus beatae a error corrupti officiis velit? Sit.</p>
</div>
<div id="active2" class="activeingreds">
<p class="activeingreds__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, illo.</p>
</div>
<div id="active3" class="activeingreds">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo reprehenderit accusantium saepe voluptate deleniti excepturi delectus aut, libero accusamus magnam nam architecto vero dolorum illo culpa vitae. Necessitatibus nam saepe mollitia eveniet.</p>
</div>
<div id="active4" class="activeingreds">
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
</div>
<div id="active5" class="activeingreds">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, porro ipsa neque quas exercitationem debitis?</p>
</div>

Answer 3

您必须考虑在链接中引用相关元素，以防止像

那样重复您的代码

<div class="carouselTypo">
<p class="carouselTypo__p" id="1" data-target="active1">A</p>
<p class="carouselTypo__p" id="2" data-target="active2">B</p>
<p class="carouselTypo__p" id="3" data-target="active3">C</p>
<p class="carouselTypo__p" id="4" data-target="active4">D</p>
<p class="carouselTypo__p" id="5" data-target="active5">E</p>
</div>
<hr>
<div id="active1" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor officia quae, quisquam minus beatae a error corrupti officiis velit? Sit.</p>
</div>
<div id="active2" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, illo.</p>
</div>
<div id="active3" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo reprehenderit accusantium saepe voluptate deleniti excepturi delectus aut, libero accusamus magnam nam architecto vero dolorum illo culpa vitae. Necessitatibus nam saepe mollitia eveniet.</p>
</div>
<div id="active4" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
<p class="activeingreds__p">Lorem, ipsum.</p>
</div>
<div id="active5" class="activeingreds" style="display: none;">
<p class="activeingreds__p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, porro ipsa neque quas exercitationem debitis?</p>
</div>

做一个像

一样的思考

$('.carouselTypo__p').click(function(e) {
$('#'+$(e.target).data('target')).toggle();
})

要切换的元素的id存储在data-target属性中。你只需要使用这个属性选择元素。