Question

我不太清楚如何解释这个，但我会尽我所能。

我一直在关注本教程here，使用环形交叉平台构建基于图像的jquery轮播。

旋转木马本身正常工作，因为我完成了教程，但是当我点击其中一个控制范围标签时，我正在尝试添加一个额外的操作..为下面的div做removeClass / addClass，显示有关的详细信息目前活跃的旋转木马项目。

JQUERY CODE：

(function($) {

var $descriptions = $('#carousel-descriptions').children('li'),
$controls = $('#carousel-controls').find('span'),
$carousel = $('#carousel')
    .roundabout({childSelector:"img", minOpacity:0 })
    .on('focus', 'img', function() {
        var slideNum = $carousel.roundabout("getChildInFocus");

        $descriptions.add($controls).removeClass('current');
        $($descriptions.get(slideNum)).addClass('current');
        $($controls.get(slideNum)).addClass('current');
    });

$controls.on('click dblclick', function() {
var slideNum = -1,
    i = 0, len = $controls.length;

for (; i<len; i++) {
    if (this === $controls.get(i)) {
        slideNum = i;
        break;
    }
}

if (slideNum >= 0) {
    $controls.removeClass('current');
    $(this).addClass('current');
    $carousel.roundabout('animateToChild', slideNum);
}
});

}(jQuery));

HTML CODE：

<div id="carousel">
<img src="images/weapons/handgun.png" alt="Handgun" class="slide" />
<img src="images/weapons/shotgun.png" alt="Shotgun" class="slide" />
<img src="images/weapons/assault-rifle.png" alt="Assault Rifle" class="slide" />
<img src="images/weapons/sniper-rifle.png" alt="Sniper Rifle" class="slide" />
</div>
<div id="carousel-controls">
  <h3>Click on a weapon type:</h3>
<span class="control current" id="handgun">Handgun</span>
<span class="control" id="shotgun">Shotgun</span>
<span class="control" id="assault-rifle">Assault Rifle</span>
<span class="control" id="sniper-rifle">Sniper Rifle</span>
</div>
<div class="ballistic-detail current" id="handgun">
  <p>Ballistic details for handguns</p>
</div>
<div class="ballistic-detail" id="shotgun">
  <p>Ballistic details for shotguns</p>
</div>
<div class="ballistic-detail" id="assault-rifle">
  <p>Ballistic details for assault rifles</p>
</div>
<div class="ballistic-detail" id="sniper-rifle">
  <p>Ballistic details for sniper rifles</p>
</div>

我可以添加到现有的jQuery代码中，以便将span控件的id链接到我想要显示的div的id吗？

我在JSFiddle上创建了这个：here但它似乎与我网站上的工作方式不同。我想我已经附上了所需的一切。无论如何，如果有人想添加它，请做！

Answer 1

您可能希望将这样的内容添加到您的点击事件处理程序中：

$controls.on('click dblclick', function() {

    ....

    $('.ballistic-detail').hide(400, function(){
        $("#" + $(this).attr('id')).show();
    });
});

那应该有用。没有工作测试，这有点难以辨别。

Answer 2

您不能拥有多个具有相同ID的元素，因此我按照以下方式构建您的HTML：

<div id="carousel-controls">
    <h3>Click on a weapon type:</h3>
    <span class="control current" id="handgun">Handgun</span>
    <span class="control" id="shotgun">Shotgun</span>
    <span class="control" id="assault-rifle">Assault Rifle</span>
    <span class="control" id="sniper-rifle">Sniper Rifle</span>
</div>
<div class="ballistic-detail handgun-info">
    <p>Ballistic details for handguns</p>
</div>
<div class="ballistic-detail shotgun-info">
    <p>Ballistic details for shotguns</p>
</div>
<div class="ballistic-detail assault-rifle-info">
    <p>Ballistic details for assault rifles</p>
</div>
<div class="ballistic-detail sniper-rifle-info">
    <p>Ballistic details for sniper rifles</p>
</div>

然后使用这个javascript：

var ballisticDetail = $('.ballistic-detail'),
    control = $('#carousel-controls .control');

control.on('click', function(){

    if( $(this).is('.current') ) return;

    control.addClass('current').not(this).removeClass('current');
    ballisticDetail.removeClass('current')
                   .filter('.'+ this.id +'-info')
                   .addClass('current');

});

前两行是缓存jQuery对象，因为每次click事件触发时我们都会使用它们。

如果click已经有效，span事件函数中的第一行代码可以防止发生任何事情。

current课程已添加到点击的span和相应的div中。它会将current类添加到所有span，然后使用.not()函数过滤掉不所有已被点击的元素并删除来自他们的current课程。

第二部分从所有详细信息框中删除current类，然后使用.filter()返回包含已点击span ID加上的类的详细信息框-info。

我使用的CSS是：

.ballistic-detail{
    display: none;
}
.ballistic-detail.current{
    display: block;
}
span.control.current{
    font-weight: bold;
}
span.control{
    cursor: pointer;
}

这里有效：http://jsfiddle.net/EFH7K/

使用环形交叉jQuery轮播启动其他addClass

2 个答案: