Question

您好，我有以下问题。我有3个divs个新闻文章。我使用带有hide()属性的文本放置了一个跨度，因此当单击“查看更多”按钮时，要检测这三个框中的哪个按钮被单击，并slideToggle()隐藏文本。我试图为每个按钮分配一个变量和每个span - 这是有效的（但它的方式是重复和缓慢）。但是当我尝试使用this选择器（为了更快的性能而不是那么重复的代码）时，它失败了。我将发布以下代码：

JSFIDDLE HERE https://jsfiddle.net/q0tzjpy3/

Jquery的：

//WORKS
var $span = $('span')[0],$span2 = $('span')[1] ,$span3 = $('span')[2];
      var $button = $('button')[0] , $button2 = $('button')[1],$button3 = $('button')[2];

      $('span').hide();
      $($button).click(function(){
        $($span).slideToggle('fast'); 
      });

       $('span').hide();
      $($button2).click(function(){
        $($span2).slideToggle('fast'); 
      });

       $('span').hide();
      $($button3).click(function(){
        $($span3).slideToggle('fast'); 
      }); 
//DOESNT WORK
$(this).find('button').click(function(){
        $(this).find('span').slideToggle();
      });

HTML：

<div class="holder">
              <div>
                  <h2>Blah</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More  Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
                  <button>Click to see more</button>
              </div>
              <div>
                  <h2>Blah</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
                  <button>Click to see more</button>
              </div>
              <div>
                  <h2>Blah</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
                  <button>Click to see more</button>
              </div>
          </div>

CSS：

.holder{
    width:80%;
    margin: 0 auto;
    text-align: center;
}


.holder div{
    width:25%;
    vertical-align: top;

    border:1px solid black;

    display:inline-block;
    padding:20px;
}

button{
    padding:10px 20px 10px 20px;
    background-color:red;
    color:#ffffff;
    border:1px solid #000000;

    cursor:pointer;
    transition:background 0.4s , color 0.5s;
}

button:hover{
    border:1px solid #000000;

    background-color:#ffffff;
    color:red;

}

Answer 1

将Jquery更改为以下内容：

$('span').hide();
$('button').click(function(){
    $(this).parent().find('span').slideToggle();
});

<强> Working Fiddle

Answer 2

$('button').click(function() {
    $(this).prev().find('span').slideToggle(); //span is descendant of p which is previous of button
});

使用.prev()

描述：获取匹配元素集中每个元素的前一个兄弟。如果提供了选择器，则仅当它与该选择器匹配时才会检索前一个兄弟。

之后使用.find()

描述：获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

DEMO

“this”选择器无法匹配函数中的元素

2 个答案: