小编Jar*_*ijn的帖子

在jQuery中更改复选框图标类onclick

我有一些来自我的数据库的复选框,如下所示:

<input type="checkbox" class="hidden chkbox" id="single_checkbox_<?php echo $page->ID; ?>"    name="pages[]" value="<?php echo $page->ID; ?>"/>
<label rel="tooltip" data-original-title="Selecteer" class="btn" for="single_checkbox_<?php echo $page->ID; ?>"><i class="icon-check-empty"></i> Selecteer</label>
Run Code Online (Sandbox Code Playgroud)

现在隐藏了复选框,因为我希望标签类充当复选框.

它实际上正在工作,但问题是<i class="icon-check-empty"></i>在单击复选框后想要更改<i class="icon-check"></i>并在取消选中后返回到icon-check-empty.

我到目前为止的jquery是

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

        if($(this).is(':checked')){
            $('i.icon-check-empty').replaceWith('<i class="icon-check"></i>');

        }else{

            $('i.icon-check').replaceWith('<i class="icon-check-empty"></i>');

        }

    });
Run Code Online (Sandbox Code Playgroud)

它确实会改变,但它改变了所有复选框,这不是我正在寻找的.

如果有人知道如何帮助我那会很棒.

亲切的问候.

html jquery

5
推荐指数
1
解决办法
2753
查看次数

Bootstrap 轮播:幻灯片完成后启动 css 动画

任何人都可以帮助我举例说明如何在轮播项目处于活动状态时启动动画。

我正在使用 daneden.me/animate/? 他的 css 和动画在下一个项目被触发后立即开始。现在我想要的是让它在幻灯片完成后开始。

这是我的 HTML

<div class="item active">               
    <div class="row" style="position:relative;">
        <div class="col-lg-6">
            <h1 class="animated fadeInLeft">Bespaar kosten met een overstap naar LED!</h1>
               <div class="lead">
               <p class="animated fadeInLeft animation-delay-hs">
                  Met LED verlichting bespaard u al snel <strong>40 tot 60%</strong> op uw energy kosten. <strong>wat LED u?</strong>
               </p>
               <a href="#" class="animated animation-delay-hs fadeInLeft btn btn-default btn-large">Vraag een offerte op maat aan</a>
                 <a href="#" class="animated animation-delay-hs fadeInLeft btn btn-warning btn-large">Lees meer</a>
               </div>
        </div>
        <div class="col-lg-6 hero-led" style="position:absolute; bottom:0; right: 0;"> …
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap twitter-bootstrap-3

0
推荐指数
1
解决办法
6678
查看次数