Question

我正在尝试使用jQuery创建下拉列表。每个下拉列表都属于同一个类。正如您所看到的，当您单击带有'.socialheader'类的标题时，它会切换'.socialsub'类的可见性。如何使用'this'关键字仅切换单击的特定元素的可见性？我意识到我可以为.socialsub类中的每个元素使用id而不是类，但我认为有一种更简洁的方法来做同样的事情。

有问题的jQuery：

$(document).ready(function(){
$('.socialsub').hide();
$('.socialheader').click(function(){
      $('.socialsub').slideToggle();
});//SHOWS AND HIDES SOCIALSUB CLASS
});

HTML（部分）：

<h2 class='socialheader'> Green Great Dragons </h2>
   <div class='socialsub'> 


       <h3> Facebook  </h3>
       <a href="http://www.facebook.com/greengreatdragons">Green Great Dragons on Facebook</a>


    <br />   
    <br />  

       <h3> Bandcamp </h3>

       <a href="http://greengreatdragons.bandcamp.com">Green Great Dragons on BandCamp</a>


    <br />  
    <br />  
    </div> 


   <h2 class='socialheader'> Colin Jones </h2>
   <div class='socialsub'> 

       <h3> Twitter </h3>
       <a href="http://www.twitter.com/colinjones93">Colin Jones on Twitter</a>


     <br />  


       <h3> Instagram </h3>   
       <a href="http://www.instagram.com/shredelicious">Colin Jones on Instagram</a>


       <h3> YouTube </h3>
       <a href="https://www.youtube.com/channel/UCwz6MLT9afvqHfn06AMkL6Q">Colin Jones on YouTube</a>


     <br />    
     <br />

Answer 1

如下所示： -

df1 <- data.frame(old.id = c(211, 211, 211, 202, 194, 202, 198, 194), usage=c(20:27), stringsAsFactors = F)
df2 <- data.frame(old.id = c(211, 211, 212, 213, 202, 198), ID =  c("a", "a", "b", "c", "d", "e"), stringsAsFactors = F)


df1$old.id <- sapply(df1$old.id , (function(nm) { out <- df2[df2$old.id == nm, ]$ID; ifelse(length(out) > 0, out[1], NA) }))

df1

实施例： -

$(document).ready(function(){
   $('.socialsub').hide();
   $('.socialheader').click(function(){ // you missed $
     $(this).next('.socialsub').slideToggle();
   });
}); // missed in your code

$(document).ready(function(){
 $('.socialsub').hide();
 $('.socialheader').click(function(){ // you missed $
   $(this).next('.socialsub').slideToggle();
 });
}); // missed in your code

Answer 2

你几乎就在那里......只需用this替换选择器字符串：

$(document).ready(function(){
   $('.socialsub').hide();
   $('.socialheader').click(function(){
      $(this).slideToggle();
   });//SHOWS AND HIDES *THIS* SOCIALSUB CLASS
});

Answer 3

如果我说得对，那么你要找的是：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.6/angular-messages.min.js"></script>

<main ng-app="akyc" ng-controller="PassportController as $ctrl">
  <form name="$ctrl.form">

    <div name="lastName" ng-class="{ 'has-error': $ctrl.form.lastName.$invalid} ">
        <label for="pp-last-name">Surname</label>
        <div class="tip">Exactly as it appears on your passport</div>
        <div ng-messages="$ctrl.form.lastName.$error" ng-if="$ctrl.form.$submitted" id="last-name-error">
          <p ng-message="required">Please enter your last name</p>
          <p ng-message="maxlength">This field can be at most 31 characters long</p>
          <p ng-message="pattern">Only English letters, spaces and the following symbols ' - . are allowed</p>
        </div>
        
        <input type="text" id="pp-last-name" ng-model="$ctrl.details.lastName" name="lastName"
               class="form-control" required ng-pattern="$ctrl.nameRegex" ng-maxlength="31" aria-describedby="last-name-error" />
      </div>

      <button type="submit" class="btn btn-primary">Test</button>

  </form>
</main>

Answer 4

我推荐这样的东西

...
<my-stars></my-stars>      <!-- <<<< using directive here -->
...

如果您在点击功能中动态创建元素，这种方式将正确绑定它们。

如何使用'this'在jQuery中使用类选择特定元素

4 个答案: