Javascript 如何使用jQuery更改div类标题

我有一些具有title属性的可折叠面板div。当我的jQuery打开面板时，我希望title属性改变，并且我希望通过当前打开的面板的类指定要改变的div。i、 e.本节课将标题改为“任何”

要使代码变得简单，以便您可以遵循：

<div class="panelContainer">
    <div class="service">
      <div class="serviceBrief" title="Click to Read More">
        <p>Some Stuff for closed panel</p>
      </div> <!-- end serviceBrief -->
      <div class="serviceDescContainer">
        <div class="serviceDesc">
          <p>some more stuff that shows when panel is open</p>
        </div><!-- end serviceDesc -->
      </div><!-- end serviceDescContainer -->
     </div><!-- end service -->
   <div class="service">
     <div class="serviceBrief" title="Click to Read More">
       <p>Some Stuff for closed panel</p>
     </div> <!-- end serviceBrief -->
     <div class="serviceDescContainer">
       <div class="serviceDesc">
         <p>some more stuff that shows when panel is open</p>
       </div><!-- end serviceDesc -->
     </div><!-- end serviceDesc Container -->
  </div><!-- end service -->
</div> <!-- end panelContainer -->

但是我想引用div类来更改title属性，这样当面板打开时，title=“单击以减少阅读”

我认为这会奏效：

$('.serviceBrief').attr('title', 'Click to Read Less');

确实如此，但显然它改变了title属性的所有实例，而不仅仅是打开的实例。我知道我没有在jQuery中使用“this”类型的命令，但是我所有的尝试都失败了，我一生都找不到任何地方的引用

有人能给我指出正确的方向吗？谢谢

$(document).ready(function() {

$('.serviceBrief').each(function(){
    $(this).append('<div class="panelOpenArrow"></div><div class="panelClosedArrow"></div>');
});

$('.serviceBrief').click(function(){
    if ($(this).parent().is('.open')) {
        $(this).closest('.service').find('.serviceDescContainer').animate({'height':'0'},500);
        $(this).closest('.service').find('.panelOpenArrow').fadeOut(500);
        $(this).closest('.service').find('.panelClosedArrow').animate({'height': '25px'});
        $(this).closest('.service').removeClass('open');
    }else{
        var newHeight = $(this).closest('.service').find('.serviceDesc').height() + 'px';
        $(this).closest('.service').find('.serviceDescContainer').animate({'height':newHeight},500);
        $(this).closest('.service').find('.panelOpenArrow').fadeIn(500);
        $(this).closest('.service').find('.panelClosedArrow').animate({'height':'0'});
        $(this).closest('.service').addClass('open');
    }
});

});

$（文档）.ready（函数（）{
$（'.serviceBrief'）。每个（函数（）{
$（此）。附加（“”）；
});
$（'.serviceBrief'）。单击（函数（）{
如果（$（this）.parent（）是（'.open'））{
$（this）.closest（'.service'）.find（'.servicedesccainer'）.animate（{'height'：'0'}，500）；
$（this）.closest（'.service'）.find（'.panelOpenArrow'）.fadeOut（500）；
$（this）.closest（'.service'）.find（'.panelClosedArrow'）.animate（{'height'：'25px'}）；
$（this）.closest（'.service'）.removeClass（'open'）；
}否则{
var newHeight=$（this）.closest（'.service'）.find（'.serviceDesc'）.height（）+'px'；
$（this）.closest（'.service'）.find（'.servicedesccainer'）.animate（{'height'：newHeight}，500）；
$（this）.closest（'.service'）.find（'.panelOpenArrow'）.fadeIn（500）；
$（this）.closest（'.service'）.find（'.panelClosedArrow'）.animate（{'height'：'0'）；
$（this）.closest（'.service'）.addClass（'open'）；
}
});
});

为什么不做：

$('.serviceBrief').click(function(){
    if ($(this).parent().is('.open')) {
        $(this).attr('title', 'Click to Read Less');
        //rest of your code

为什么不干脆做：

$('.serviceBrief').click(function(){
    if ($(this).parent().is('.open')) {
        $(this).attr('title', 'Click to Read Less');
        //rest of your code

---

你的钱是对的。只需在单击事件中引用

$（this）

，即可将属性应用于单击的元素，而不是所有

。serviceBrief

元素：

$('.serviceBrief').click(function(){
    if ($(this).parent().is('.open')) {
        $(this).attr( "title", "Click to Read Less");
     $(this).closest('.service').find('.serviceDescContainer').animate({'height':'0'},500);
        $(this).closest('.service').find('.panelOpenArrow').fadeOut(500);
        $(this).closest('.service').find('.panelClosedArrow').animate({'height': '25px'});
        $(this).closest('.service').removeClass('open');
    }else{
        var newHeight = $(this).closest('.service').find('.serviceDesc').height() + 'px';
        $(this).attr( "title", "Click to Read More");
        $(this).closest('.service').find('.serviceDescContainer').animate({'height':newHeight},500);
        $(this).closest('.service').find('.panelOpenArrow').fadeIn(500);
        $(this).closest('.service').find('.panelClosedArrow').animate({'height':'0'});
        $(this).closest('.service').addClass('open');
    }
});

---

你的钱是对的。只需在单击事件中引用

$（this）

，即可将属性应用于单击的元素，而不是所有

。serviceBrief

元素：

$('.serviceBrief').click(function(){
    if ($(this).parent().is('.open')) {
        $(this).attr( "title", "Click to Read Less");
     $(this).closest('.service').find('.serviceDescContainer').animate({'height':'0'},500);
        $(this).closest('.service').find('.panelOpenArrow').fadeOut(500);
        $(this).closest('.service').find('.panelClosedArrow').animate({'height': '25px'});
        $(this).closest('.service').removeClass('open');
    }else{
        var newHeight = $(this).closest('.service').find('.serviceDesc').height() + 'px';
        $(this).attr( "title", "Click to Read More");
        $(this).closest('.service').find('.serviceDescContainer').animate({'height':newHeight},500);
        $(this).closest('.service').find('.panelOpenArrow').fadeIn(500);
        $(this).closest('.service').find('.panelClosedArrow').animate({'height':'0'});
        $(this).closest('.service').addClass('open');
    }
});

---

您可以向处理程序函数传递一个参数

e

，其中包含触发它的。将包含处理事件的实际元素，因此您可以更改该元素的属性以仅影响当前元素

$('.serviceBrief').click(function(e){
    var objThis = $(e.currentTarget);
    var objService = objThis.parent();
    if (objService.is('.open')) {
        objService.find('.serviceDescContainer').animate({'height':'0'},500);
        objService.find('.panelOpenArrow').fadeOut(500);
        objService.find('.panelClosedArrow').animate({'height': '25px'});
        objService.removeClass('open');
        objThis.attr("title", "Click to Read More");
    }else{
        var newHeight = objService.find('.serviceDesc').height() + 'px';
        objService.find('.serviceDescContainer').animate({'height':newHeight},500);
        objService.find('.panelOpenArrow').fadeIn(500);
        objService.find('.panelClosedArrow').animate({'height':'0'});
        objService.addClass('open');
        objThis.attr("title", "Click to Read Less");
    }
});

这是一把小提琴：

---

最好将DOM查询缓存在对象中以提高性能。

您可以向处理程序函数传递一个参数

e

，其中包含触发它的参数。将包含处理事件的实际元素，因此您可以更改该元素的属性以仅影响当前元素

$('.serviceBrief').click(function(e){
    var objThis = $(e.currentTarget);
    var objService = objThis.parent();
    if (objService.is('.open')) {
        objService.find('.serviceDescContainer').animate({'height':'0'},500);
        objService.find('.panelOpenArrow').fadeOut(500);
        objService.find('.panelClosedArrow').animate({'height': '25px'});
        objService.removeClass('open');
        objThis.attr("title", "Click to Read More");
    }else{
        var newHeight = objService.find('.serviceDesc').height() + 'px';
        objService.find('.serviceDescContainer').animate({'height':newHeight},500);
        objService.find('.panelOpenArrow').fadeIn(500);
        objService.find('.panelClosedArrow').animate({'height':'0'});
        objService.addClass('open');
        objThis.attr("title", "Click to Read Less");
    }
});

这是一把小提琴：

---

将DOM查询缓存在对象中以提高性能是个好主意。

您可以更轻松地编写这些查询。我将把它缩短为“some”，这意味着除了我将要展示的内容之外还有更多内容，但希望这一细分将帮助您了解jQuery的真正功能

---

你可以写得容易得多。我将把它缩短为“some”，这意味着除了我将要展示的内容之外还有更多内容，但希望这一细分将帮助您了解jQuery的真正功能

---

另一方面，如果您使用的是jQuery 1.7版或更高版本，则应该使用

.prop（'title'，'newtitle'）

而不是

.attr（）

。这不会影响您遇到的问题，只是一个“良好实践”。尽管在本例中，

title

实际上是一个属性，而不是属性，但这一点在Cory是很好的

.prop

和

.attr

在这种情况下可以互换使用。@SetSailMedia:两者都有，不是吗？它是HTML中的一个属性，但也是DOM中的一个属性。jQuery创建了

prop（）

来直接修改DOM对象属性，这通常是您想要做的，在这种情况下也应该可以工作。根据，DOM

title

属性刚刚设置，因此在这种情况下使用

attr（）

似乎是合适的。有人能找到title属性的w3.org定义吗？@Corion，这是我能找到的定义：顺便说一句，如果您使用的是jQuery 1.7版或更高版本，您应该使用

.prop（'title'，'newtitle'）

而不是

.attr（）

。这不会影响您遇到的问题，只是一个“良好实践”。尽管在本例中，

title

实际上是一个属性，而不是属性，但这一点在Cory是很好的

.prop

和

.attr

在这种情况下可以互换使用。@SetSailMedia:两者都有，不是吗？它是HTML中的一个属性，但也是DOM中的一个属性。jQuery创建了

prop（）

来直接修改DOM对象属性，这通常是您想要做的，在这种情况下也应该可以工作。根据，DOM

title

属性刚刚设置，因此在这种情况下使用

attr（）

似乎是合适的。有人能找到w3.org对title属性的定义吗？@Corion，这是我能找到的定义：天哪。。。我不觉得自己很愚蠢吗。其中有一个人一时看不见森林。非常感谢。天哪。。。我不觉得自己很愚蠢吗。其中有一个人一时看不见森林。非常感谢。非常感谢。我把之前的海报标记为正确答案，因为他先贴了，但我感谢他的帮助！非常感谢。我把之前的海报标记为正确答案，因为他先贴了，但我感谢他的帮助！好的附加信息将帮助我成为一名更好的开发人员。非常感谢。好的附加信息将帮助我成为一名更好的开发人员。非常感谢。谢谢你抽出时间！这也将帮助我成为一名更好的开发人员。谢谢你！谢谢你抽出时间！这也将帮助我成为一名更好的开发人员。谢谢你！