个人中心
gpt4 book ai didi

javascript - 单击按钮后 jQuery 函数不起作用？

转载 作者：搜寻专家 更新时间：2023-10-31 22:40:22 25 4
gpt4 key购买 nike

<分区>

我想要发生的事情

  • 当按下添加按钮时，将在添加按钮所在行的下方添加一行
  • 当按下删除按钮时，该行将被删除。
  • 当悬停或单击某个输入文本时，旁边会显示一个添加按钮。
    • 当鼠标未悬停在输入文本上或未选择输入文本时，添加按钮应该消失。
  • 将鼠标悬停在某个项目符号上时，会出现一个删除按钮来代替项目符号。
    • 当鼠标离开删除按钮时，它将恢复为子弹。

我怀疑我的一些问题发生在 b/c 我将我所有的函数放在 $(document).ready() 中。如果有人能打出我应该使用的 jQuery 代码，我将不胜感激!

发生了什么

添加按钮 enter image description here

只有第一个添加按钮有效。

删除按钮 enter image description here其他添加行的删除按钮仅在悬停在第一个项目符号上时显示。

enter image description here删除按钮只能使用一次。删除一行后，删除按钮和添加按钮将失去其功能。删除和添加按钮也没有像它们应该的那样消失。

我的代码

HTML

这是我要添加的行

<div class="row">
                <div class="col-lg-7">
                    <div class="form-group">
                        <div class="input-group input-group-lg">
                            <div class="input-group-btn"> 
                                <button type="button" class="btn btn-default button-remove" aria-label="Remove">
                                    <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                                </button>
                                <button type="button" class="btn btn-default button-bullet" aria-label="Bullet">
                                    <span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span>
                                </button>
                            </div> 
                            <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here"> 
                            <div class="input-group-btn">  
                                <button type="button" class="btn btn-default button-add" aria-label="Add">
                                    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                </button> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>

jQuery

这些是我用来设置按钮动画和添加/删除行的函数。

$(document).ready(function(){
    $("input[type='text'][name='Worksheet-Problem']").closest('.row').hover(function()      {
        $(".button-add").fadeToggle(300);
    })
    $(".button-bullet").closest('.input-group-btn').hover(function(){
        $('.button-bullet').toggle();
        $(".button-remove").toggle();
    })

    $(".button-add").click(function(){
        var $row = $(this).closest('.row');
        var $wsProbRow = $row.clone();
        $wsProbRow.insertAfter($row);
        console.log("Add-Button pressed");
    })
    $(".button-remove").click(function(){
        $(this).closest('.row').remove();
        console.log("Remove-Button pressed");
    })
})

JSFiddle

25 4 0
文章推荐： php - 由于 url 路径错误，样式未在 magento 中加载，如何解决？
文章推荐： PHP std::Class 检查属性是否存在
文章推荐： PHP 字符串数字连接搞砸了
文章推荐： php 从字符串中提取表情符号
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com