Question

点击'right_arrow'类后，我试图获取下面'title_head'div中下一个文本的值。

<div class="header">
    <div class="col-md-8 title">
       <div class="title_head">SHIRT</div>
       <div class="title_head" style="display:none">COLLAR</div>
       <div class="title_head" style="display:none">BUTTON</div>
       <div class="title_head" style="display:none">SLEEVE</div>
    </div>
    <div class="col-md-4 right_arrow"><img src="img/arrows-right.png" alt=""></div>
</div>

我的jQuery代码如下。

var current = $('.title_head:visible').text();
var first = $('.title_head').first().text();
var last = $('.title_head').last().text();

$('.right_arrow').click(function(){
    if(current == last){
        $('.right_arrow').css('opacity','0.3');
        $('.right_arrow').css('cursor','default');
    }else{
        $(current).css('display','none');
        var val = $('.title_head').nextAll('.title_head:first').text();
        var next_val = $('.title_head').text(val);
        alert(next_val);
    }
});

我遇到的问题是，当我提醒'next_val'的值时，它返回一个对象Object数组。我认为它将其他div的所有值作为一个整体，例如“COLLARBUTTONSLEEVE”而不是单个值，例如“COLLAR”，“BUTTON”，“SLEEVE”。

我还需要将下一个元素文本显示为可见，并隐藏以前可见的文本类型，如图像滑块，但带有文本。

我希望这很清楚。感谢您的帮助。

Answer 1

您可以将javascript重写为更像这样的内容：

var items = $('.title_head'),
    index = 1; //start at position

$('.right_arrow').click(function(){

    if(items.length > index) {
        $('.title_head').hide();

        var $nextEl = $($('.title_head')[index++]),
            val = $nextEl.html();

        $nextEl.show();
        alert(val);
    }
    if(items.length === index) {
        $('.right_arrow').css('opacity','0.3');
        $('.right_arrow').css('cursor','default');
    }
});

查看小提琴： http://jsfiddle.net/rK4KR/1/

当您查询.title_head时，它将返回一组节点。我们可以简单地遍历该数组的每个位置并解析该值。这样我们就不必总是检查哪个节点可见。

使用Jquery显示来自姐妹div的文本值？

1 个答案: