4

我有一些单选按钮。

<div class="user">
        <input type="radio" class="user-radio" name="user" value="user"/>
        <p>BLABLA</p>
</div>
<div class="user">
        <input type="radio" class="user-radio" name="user" value="user"/>
        <p>BLABLA</p>
</div>
<div class="user">
        <input type="radio" class="user-radio" name="user" value="user"/>
        <p>BLABLA</p>
</div>

我想要做的是，在选中该 div 内的单选按钮时附加<div class="user">一个。<a><a/>当我选择另一个单选按钮时，我想删除最后插入<a><a/>的并在新选择的单选按钮的父 div 中插入一个新按钮。

我已经尝试过这样的事情，但我无法让它工作：

<script>
$('.user').click(function () {
    if (!$(".user-radio").is(':checked')) {
        $(this).append('<a></a>');
    }
})
</script>
4

5 回答 5

4

见演示

$('.user-radio').change(function () {
    $('.user a').remove();
    $('.user-radio:checked').parent().append('<a>hello</a>');
});​
于 2012-08-01T04:10:18.023 回答
2

我一直更喜欢showandhide而不是appendandremove元素。
并change改为使用。

html

<div class="user">
        <input type="radio" class="user-radio" name="user" value="user"/>
        <p>BLABLA</p>
        <a href="javascript:void(0)">blabla</a>        
</div>

js

$('.user').change(function () {
    $("a").hide();
    $("a", this).show();
});

css

.user a {
    display: none;
}

演示

于 2012-08-01T04:10:04.953 回答
1 
<script>
$('.user-radio').click(function () {
    $('.user > a:last-child').remove()
    if ($(this).is(':checked')) {
        $(this).parent().append('<a>test</a>');
    }
});
</script>

http://jsfiddle.net/s7eRz/

于 2012-08-01T04:14:47.820 回答
1

在这里，我已经完成了完整的垃圾箱。演示链接如下：

演示： http ://codebins.com/bin/4ldqp93

HTML：

<div class="user">
  <input type="radio" class="user-radio" name="user" value="user" />
  <p>
    BLABLA
  </p>
</div>
<div class="user">
  <input type="radio" class="user-radio" name="user" value="user"/>
  <p>
    BLABLA
  </p>
</div>
<div class="user">
  <input type="radio" class="user-radio" name="user" value="user"/>
  <p>
    BLABLA
  </p>
</div>

CSS：

.user p{
  display:inline-block;
  marign:0px;

  padding:0px;
}
input{
  padding:0px;
}
.user{
  border:1px solid #f53322;
  color:#333;
  background:#a3f7a2;
}
.user a{
  color:#112288;
  font-weight:bold;
  display:block;
  padding:5px;
}

查询：

$(function() {
    $('.user-radio').change(function() {
        if ($(this).is(':checked')) {
            $('.user a').remove();
            $('.user-radio:checked').parent(".user").append("<a href='javascript:void(0);'>Add New Link</a>");
            //Another Alternate way is
            /*  $('.user-radio:checked').closest(".user").append("<a href='javascript:void(0);'>Add New Link</a>"); */
        }
    });
});

演示： http ://codebins.com/bin/4ldqp93

于 2012-08-01T05:33:33.513 回答
0

remove the ! operator and change the first selector from ".user" .user-radio and then append the <a>link</a> to the parent of $(this) element:

$('.user-radio').click(function () {
    if ($(this).is(':checked')) {
        $(".user a").remove();
        $(this).parent().append('<a>dwd</a>');
    }
});
于 2012-08-01T04:41:48.650 回答