Question

我有一些具有title属性的可折叠面板div。当我的jQuery打开面板时，我想要更改title属性，我想通过当前正在打开的面板的类来指定要更改的div。即this.div.class将标题更改为“whatever”。

使代码愚蠢简单，让您遵循：

<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 -->

我理解如何使用ID

执行此操作

            $('#sampleID').attr('title', 'Click to Read More');

但是我想这样做引用div类来改变title属性所以当面板打开时title =“Click to Read Less”

我认为这样可行：

$('.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');
    }
});

});

Answer 1

为什么不这样做：

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

Answer 2

你的钱是对的。只需在点击事件中引用$(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');
    }
});

Answer 3

您可以向处理程序函数传递一个参数e，其中包含触发它的event。 e.currentTarget property将包含处理事件的实际元素，因此您可以将其属性更改为仅影响当前元素。

$('.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");
    }
});

这是一个小提琴：http://jsfiddle.net/gtXpx/

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

Answer 4

你可以更轻松地写这一切。我会将它缩短为“some”，这意味着除了我将展示的内容之外还有更多内容，但希望这些细分可以帮助您了解jQuery实际上有多强大。

Example

<script type="text/javascript">
    $(function() {  //  same as $(document).ready ... but SHORTER!
        $('.serviceBrief').each(function(i) {   //  of course i stands for the 0 based index of the elements in this object
            $(this).append( //  many different ways to (pre|ap)pend elemnts, this is my fav do to the "readability"
                $('<div />', { class: 'panelArrow panelOpenArrow' }),   //  set attributes in the {  }
                $('<div />', { class: 'panelArrow panelClosedArrow' })  //  don't forget to place comma before appending more elements
                //  keep in mind, you could continue inside here and append to what is being appended!
            )
        })  //  here I continue to "chain", no need to recall the same object
        .click(function(e) {    //  simple click event, you might also look at "delegate"ing events
            var aroOpen = $(this).children('.panelOpenArrow'),
                aroClose = $(this).children('.panelClosedArrow');
                //  i establish these variable for ease of use in next event

            //  considering the way your HTML is layed, there's really no need for all that "find"ing, it's just more code time, less action time!
            $(this).next('.serviceDescContainer').slideToggle(500, function(e) {    //  this is much the same as what you were trying to do using .animate
                if ($(this).is(':visible')) {   //  kind of like your class check, except this checks the display, opacity, and even considers height (in newer jQuery versions) for "visibility"
                    //  at this point, this first line is "unneccesary", but I left it here in case you were doing some "CSS" using that class name
                    $(this).closest('.service').addClass('open');
                    //  .stop prevents animations previously taking place, like if a user clicks this real fast
                    aroOpen.stop().fadeOut(500);
                    aroClose.stop().animate({ height: '25px' });
                }
                else {
                    $(this).closest('.service').removeClass('open');
                    aroOpen.stop().fadeIn(500);
                    aroClose.stop().animate({ height: 0 });
                }
            })
        });
    })
</script>

Example with/out Comments

<script type="text/javascript">
    $(function() {
        $('.serviceBrief').each(function(i) {
            $(this).append(
                $('<div />', { class: 'panelArrow panelOpenArrow' }),
                $('<div />', { class: 'panelArrow panelClosedArrow' })
            )
        })
        .click(function(e) {
            var aroOpen = $(this).children('.panelOpenArrow'),
                aroClose = $(this).children('.panelClosedArrow');
            $(this).next('.serviceDescContainer').slideToggle(500, function(e) {
                if ($(this).is(':visible')) {
                    $(this).closest('.service').addClass('open');
                    aroOpen.stop().fadeOut(500);
                    aroClose.stop().animate({ height: '16px' });
                }
                else {
                    $(this).closest('.service').removeClass('open');
                    aroOpen.stop().fadeIn(500);
                    aroClose.stop().animate({ height: 0 });
                }
            })
        });
    })
</script>

如何使用jQuery更改div类标题

4 个答案:

Example

更多阅读

Example with/out Comments