Question

点击它时我有链接显示特定div，其余隐藏。一切正常，但它是一个接一个地手动编码。见http://jsfiddle.net/M9kAX/

是否有更好的方法可以使用适用于所有divs的简单脚本对其进行编码？

谢谢，

<div class="kosa">
<div id="video0"><h5>Introduction</h5>  
Intro
</div>          
<div id="video1"><h5>Install </h5>  
Install
</div>
<div id="video2"><h5>Authorize with Adobe ID</h5>
Authorize
</div>
<div id="video3"><h5>Add a Library</h5>
Add Lib
</div>
<div id="video4"><h5>Borrow titles</h5>
Borrow
</div>
<div id="video5"><h5>Download</h5>
Download
</div>
<div id="video6"><h5>Read eBooks</h5>
Read
</div>
<div id="video7"><h5>Delete, Return, & Share</h5>
Del
</div>
<div id="video8"><h5>One</h5>
One
</div>
</div>
       <div class="related">    
            <h5>Related Videos</h5>
            <span id="link0"><i class="icon-video"></i> Introduction</span>
            <span id="link1"><i class="icon-video"></i> Install</span>
            <span id="link2"><i class="icon-video"></i> Authorize with Adobe ID</span>
            <span id="link3"><i class="icon-video"></i> Add a Library</span>
            <span id="link4"><i class="icon-video"></i> Borrow titles</span>
            <span id="link5"><i class="icon-video"></i> Download</span>
            <span id="link6"><i class="icon-video"></i> Read eBooks</span>
            <span id="link7"><i class="icon-video"></i> Delete, Return, & Share</span>
            <span id="link8"><i class="icon-video"></i> One</span>
         </div>

$(function() {      
        $('#video1,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide();   
        $('#link0').click(function () {$('#video0').show();$('#video1,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link1').click(function () {$('#video1').show();$('#video0,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link2').click(function () {$('#video2').show();$('#video0,#video1,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link3').click(function () {$('#video3').show();$('#video0,#video1,#video2,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link4').click(function () {$('#video4').show();$('#video0,#video1,#video2,#video3,#video5,#video6,#video7,#video8').hide(); });
        $('#link5').click(function () {$('#video5').show();$('#video0,#video1,#video2,#video3,#video4,#video6,#video7,#video8').hide(); });
        $('#link6').click(function () {$('#video6').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video7,#video8').hide(); });
        $('#link7').click(function () {$('#video7').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video6,#video8').hide(); });
        $('#link8').click(function () {$('#video8').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video6,#video7').hide(); });
        });

Answer 1

的 JSFIDDLE DEMO 的

$('[id^=video]').hide(); $('#video0').show(); //show only 1st one //events on ids which begin with link i.e., link0, link1... $('[id^=link]').click(function() { var newId = this.id.replace("link","video"); //make a new ID $('[id^=video]').hide();//hide all divs first $('#' + newId).show();//show specific div });

Answer 2

我会使用data属性：

<span id="link0" data-video="video0"><i class="icon-video"></i> Introduction</span>

使用data-video将视频ID添加到每个范围，然后您可以使用jQuery的data函数来检索值并显示所需的div：

$(function() {      
    $('.kosa div').hide();
    // $('.kosa div:first').show(); // uncomment this line to show the frst div by default
    $('.related span').click(function() {
       $('.kosa div').hide();
       $('#'+$(this).data('video')).show();
    });
});

这种方法比使用.eq函数更灵活，这会强制您移动div并确保每次编辑时它们的顺序正确。如果需要，这还允许您链接到具有多个跨度的相同div。

http://jsfiddle.net/M9kAX/3/

Answer 3

使用css classNames（fiddle）：

$(function () {
    var $videos = $('.video');

    var showVideo = function (index) {
        $videos.hide().eq(index).show();
    };

    showVideo(0);

    $('.link').click(function () {
        var linkIndex = $(this).index() - 1;
        showVideo(linkIndex)
    });

});

Answer 4

try something like this

$(function() {      
    $("span").click(function(){
        $("div.kosa").find("div#video").html($(this).text());
    });
});

Answer 5

jQuery (".kosa")    .find ("div:first-child")
                    .css ("display", "block");

jQuery (".related")    .find ("span")
.click (function () {
       $idNo = jQuery (this).attr ('id').substring(4); 
    jQuery (".kosa")    .find ("div")
                        .css ("display", "none");

    jQuery (".kosa")    .find ("#video" + $idNo)
                        .css ("display", "block");
});

Css改变：

.kosa div{
    padding:40px;
    background:#ccc; 
    display: none; // Included
}

jsFiddle：http://jsfiddle.net/M9kAX/11/

jquery隐藏所有并显示孩子

5 个答案: