重点:
1.自定义属性解决动态生成元素的删除
2.利用事件委派删除动态生成的元素改变对应checkbox状态
3.注意this的指向问题
//已选择路线的添加
//游玩路线
$('.travel-form>div>div>p input').on('click', function() {
var choice = $('<a href="javascript:;"></a>');
choice.attr('myIndex', $(this).index()); //为动态生成的游玩路线添加自定义属性myIndex
if ($(this).prop("checked")) {
$('.travel-form>div>div:first-of-type>p').append(choice);
choice.html($(this).prevAll('span').text() + $(this).val() + '<i></i>');
} else {
//for循环遍历整个已选择路线里的a标签
for (var i = 0; i < $('.travel-form>div>div:first-of-type>p>a').length; i++) {
//判断是否有符合自定义属性的a标签
if ($('.travel-form>div>div:first-of-type>p>a').eq(i).attr('myIndex') == $(this).index()) {
//删除对应a标签
$('.travel-form>div>div:first-of-type>p>a').eq(i).remove();
}
}
}
})
//以下所有p>a标签结构
$('.travel-form>div>div:nth-of-type(n+2)>p').on('click', 'a', function() {
var choiceA = $('<a href="javascript:;"></a>');
$('.travel-form>div>div:first-of-type>p').append(choiceA);
choiceA.html($(this).prevAll('span').text() + $(this).text() + '<i></i>');
})
//已选择路线的删除
$('.travel-form>div>div:first-of-type>p').on('click', 'i', function() {
$(this).parent().fadeOut(function() { //回调函数(淡出效果)
$(this).remove(); //这里的this指的是a标签了
});
//for循环遍历input元素
for (var i = 0; i < $('.travel-form>div>div>p input').length; i++) {
//判断input的index属性是否与动态生成的a标签自定义属性myIndex相等
if ($('.travel-form>div>div>p input').eq(i).index() == Number($(this).parent().attr('myIndex'))) {//这里注意需要转换为数字类型
//符合条件则修改input框的checked值为false
$('.travel-form>div>div>p input').eq(i).prop('checked', false);
}
}
})