使用CSS/jQuery操作元素

Element manipulation with CSS/jQuery

本文关键字：操作 元素 jQuery CSS 使用      更新时间：2023-09-26

我正在做一些操作，大概是用jQuery，这很像以前问过的问题:使用Javascript隐藏和显示div -当新标题打开时隐藏

我已经把我的问题弄清楚了。我正在制作一些药丸/标签，其中每个药丸分为三个部分，每个部分都包含"阅读更多"的可能性，这就是显示/隐藏发挥作用的地方。我的主页在这里:https://jsfiddle.net/jwb99gw1/6/

<div class="container">
  <h2>Pills</h2>
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a class="" href="#a">Read more</a>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>Header</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#b">Read more</a>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>Something else</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#c">Read more</a>
        </div>
        </div>
        <div id="a">Lorem ipsum (A)</div>
        <div id="b">Lorem ipsum (B)</div>
        <div id="c">Lorem ipsum (C)</div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

目前，我已经做了一个纯粹的基于css的解决方案，但它不能处理用户体验。我想"阅读更多"切换到"隐藏文本"，一旦点击，当然如果点击在那个状态，然后隐藏文本。理想情况下，切换药丸/标签也应该隐藏元素。

我的问题与我一开始提出的问题相比，有些地方不一样。元素不是相互封闭的，所以我不认为"this"关键字会起作用，至少不完全是前一个问题如何处理它。

你会如何解决这个问题?必须有一个比ID对ID的jQuery处理更聪明的解决方案。

我将.display-box添加到您的.container中。

<div class="container display-box">
    ...
        <a data-target="#a">Read more</a>
        <a data-target="#b">Read more</a>
        <a data-target="#c">Read more</a>
    ...
        <div id="a" class="box">Lorem ipsum (A)</div>
        <div id="b" class="box">Lorem ipsum (B)</div>
        <div id="c" class="box">Lorem ipsum (C)</div>
    ...
</div>
JQuery

$(".display-box").each(function () {
    var $this = $(this);
    $this.find("[data-target]").each(function () {
        $(this).click(function () {
            $($this.data("visible")).hide();
            $("[data-target='"+$this.data("visible")+"']").text("Read more");
            if ($this.data("visible") !== $(this).data("target")) {
                $this.data("visible", $(this).data("target"));
                $(this).text("Hide text");
                $($this.data("visible")).show();
            } else {
                $this.data("visible", "")
            }
        });
    });
})
CSS

.box {
    display:none;
}

jsfiddle: https://jsfiddle.net/jwb99gw1/11/

解释

基本上，这对每个.displaybox进行迭代，并找到具有属性data-target的每个元素，然后为每个元素添加一个单击事件侦听器。

它隐藏了data-visible数据中指定的.display-box元素，但该数据对检查器是隐藏的。然后，它从单击的链接中获取data-target的值，并将其存储回data-visible。然后显示data-visible中指定的元素，该元素是所单击链接的目标。

由于没有类来引用被单击的元素，因此我们必须使用某种父关系。当我们无法控制生成的DOM 时，下面的方法可能会证明非常有用，因此可以按如下方式完成:

hideall = function(){
 jQuery("#home p ").next("a").each(function(e){ // accessing all the pairs of readmore elements and their respective companion elements
    readmore2 = jQuery(this).attr('href'); // get the readmoreid
    id2 = readmore2.substr(1); // extract the id
    jQuery("#"+id2).hide();
 });
}
jQuery("#home p ").next("a").on("click", function(e){
  e.preventDefault; // prevent the <a> tag from navigating
  readmore = jQuery(this).attr('href'); // get the readmoreid
  id = readmore.substr(1); // extract the id
  hideall();
  jQuery("#"+id).show();
});
jQuery(document).on( 'shown.bs.tab', function (e) {
   hideall();
});

即使这个解决方案有效，这也不是正确的方法，我建议您使用类来获得更有效和更好的代码。

哇，我的答案有点晚了，但我一直在努力，所以我还是会贴出来的。

$(function(){    
$(".a").click(function () {
$(".p").toggle();
$(this).text(function(i, text){
return text === "Read more" ? "Hide text" : "Read more";
}) 
});

jsfiddle

相关文章：