javascript - jquery 因下拉菜单选择操作而失败-6ren

javascript - jquery 因下拉菜单选择操作而失败

转载作者：行者123 更新时间：2023-11-30 10:22:45

25

4

我正在对下拉菜单项选择执行操作。

JS fiddle

但是当我在本地主机上测试时没有做任何操作，甚至不显示菜单项。虽然我已经包含了所有文件。

代码:

<html lang="en">
    <head>
        <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="sticky-footer-navbar.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script> 

    <script>
    $(".dropdown-menu li a").click(function(){
    alert("hi");
      var selText = $(this).text();
      $('label').css('color',selText);
    });

 </script>
    </head>
<body>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">yellow</a>

                </li>
                <li><a href="#">green</a>

                </li>
                <li><a href="#">black</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>
</body>
</html>

这段代码有什么问题？

更新1

    <script>
    $( document ).ready(function() {
    alert("hi");
      var selText = $(this).text();
      $('label').css('color',selText);
    });
 </script>

没有变化

结果是这样的:

更新代码:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script> 
<link href="css/bootstrapa.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">    

    </head>
<body>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">yellow</a>

                </li>
                <li><a href="#">green</a>

                </li>
                <li><a href="#">black</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>
    <script>
$( document ).ready(function() {
    alert("hi");
      var selText = $(this).text();
      $('label').css('color',selText);
    });
 </script>
</body>

</html>

最佳答案

这是您的代码:

<!doctype html>
<html lang="en">
    <head>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    </head>
<body>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">yellow</a>

                </li>
                <li><a href="#">green</a>

                </li>
                <li><a href="#">black</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>         


    <script>
        $(".dropdown-menu li a").click(function(){
        alert("hi");
          var selText = $(this).text();
          $('label').css('color',selText);
        });
    </script>
</body>
</html>

希望这对您有所帮助。

关于javascript - jquery 因下拉菜单选择操作而失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20889097/

25

4

0

文章推荐： javascript - 颜色向下滚动时如何更改背景颜色？

文章推荐： javascript - 通过更改绘图数据更新浮点图

文章推荐： objective-c - 通过 Objective C 代码“显示包内容”

php - fopen 失败，getaddrinfo 失败
我在使用以下代码时遇到问题: function http_file_exists($url){ $f=fopen($url,"r"); if($f){ fclose($f); retu
Git 推送到 Azure 失败(RPC 失败)
我已经通过 Git 部署到 Azure 几个月了，没有出现重大问题，但现在我似乎遇到了一个无法克服的错误。我创建了一个新的 Azure 网站，为正在开发的项目创建单独的预览链接。我在新站点上设置了
flutter - Flutter:构建应用程序 bundle 失败:失败:构建失败，出现异常
我已经通过flutter创建了一个App并完成了它，我想在flutter文档中阅读时进行部署。我收到此错误: FAILURE: Build failed with an exception. * W
powershell - Powershell ForEach循环间歇性工作-工作，失败，工作，失败，工作等
我在Windows 10中使用一些简单的Powershell代码遇到了这个奇怪的问题，我认为这可能是我做错了，但我不是Powershell的天才。我有这个: $ix = [System.Net.Dn
curl - 快速 JSON 失败，断言 `IsObject()' 失败
我正在尝试使用 RapidJSON 解析从服务器接收到的数据。以下是收到的确切字符串: [ { "Node": "9478149a08f9", "Address": "172.17
c++ - 为 iOS 编译 OpenCV 失败 - Cmake 失败
我尝试为 ios 编译 OpenCV。我总是收到这些错误。我用不同版本的opencv试了一下，结果都是一样的。我运行这个:python 平台/ios/build_framework.py ios_o
c# - Redis Server 失败，Socket 失败，超出输出缓冲区限制，我该如何增加限制？
我在一台机器上做基本的发布/订阅，我的客户端是 StackExchange-Redis 的 C# 客户端，我在同一台机器上运行基于 Windows 的 Redis 服务器(服务器版本 2.8.4) 当
php - 编辑 php mysqli CRUD 失败 - 仅更新数据 mysql 失败
我有这段代码，但无法执行，请帮我解决这个问题连接 connect_error) { die ("connection failed: " . $terhubung->connect_erro
java - (警告)扫描 JAR 失败(错误)处理 JAR 失败
我在 tomcat 上运行并由 maven 编译的 Web 应用程序给出了以下警告和错误。我可以在本地存储库中看到所有 JAR，但有人可以帮忙吗。 WARNING: Failed to scan JA
android - ndk-build 失败，process_begin : CreateProcess(NULL, uname -a, ...) 失败
我正在 Windows 8 上使用 Android Studio 开发一个 android 应用程序，我正在使用一些 native 代码。突然间我无法编译我的 C 文件。当我运行 ndk-build
c++ - 使用 boost 反序列化二进制数据时 static_assert 失败 "typex::value"失败
下面的代码对类和结构的成员进行序列化和反序列化。序列化工作正常，但我在尝试使用 oarch >> BOOST_SERIALIZATION_NVP(outObj); 反序列化时遇到了以下错误；代码中是
ruby-on-rails - Rspec 测试以 'rspec' 失败，但以 'rspec path_of_the_file' 失败
如果我运行此命令“rspec ./spec/requests/api/v1/password_reset_request_spec.rb”，此文件中的所有测试都会通过。但是，当我运行“rspec”时
angular - 加载文件 Protractor 失败 - 失败 : script timeout: result was not received in 11 seconds
我在尝试执行测试以使用 Protractor 上传文件时出错，我的代码是这个 it('it should be possible to upload a file', function() {
java - System.loadLibrary 失败，错误为 : java. lang.UnsatisfiedLinkError:dlopen 失败:无法找到符号 "__aeabi_memmove4"
System.loadLibrary("nativefaceswap"); 当我运行我的应用程序时，我在 Android Studio 中发现了此类错误。在logcat中显示: java.lang.U
git - SSL_ERROR_SYSCALL 和 gnutls_handshake() 失败 - SSL/HTTPS 失败 [Ubuntu Server 18.04]
我希望有人能帮助我!使用任何方法或命令行的任何 SSL/HTTPS 调用均无效。我在 Windows 10 中使用 Ubuntu Server 18.04 作为子系统。我的问题是昨天才开始出现的，因
mysql - Django South - db.alter 函数删除 null=true Blank=true 失败，mysql 失败
通过删除这两个值将日期字段从 null=True 和 Blank=True 更改为 required 时，使用 db.alter 命令时遇到问题。当以下行被注释掉时，迁移运行不会出现问题。
linux - python setup.py egg_info"失败，错误代码为 1 in/tmp/pip-build-zsm7incx/phonenumbers/- 失败
我第一次使用 Heroku 尝试创建应用程序(使用 SendGrid 的 Inbound Parse Webhook"和 Twilio SMS 通过电子邮件发送和接收 SMS 消息)。通过 Virtu
ios - Xcode 7 失败，Command/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swiftc 失败，退出代码为 1
我正在将我的 swift 项目更新到 Xcode 7 上的 Swift 2.0。xcode 在构建项目时报告了以下错误: 命令/Applications/Xcode.app/Contents/Deve
SSL_library_init() 失败
在我的代码中，SSL 库函数 SSL_library_init() 没有按预期返回 1。我如何才能看到它返回了什么错误？我在 SSL_library_init() 之后调用了 SSL_load_er
jQuery .load() 失败
我正在尝试运行在以下链接中找到的答案: Asynchronously Load the Contents of a Div 但是当我这样做时，我会遇到我不太理解的错误。我的代码: $(documen

首页

博学

6Ren·AI

商城

javascript - jquery 因下拉菜单选择操作而失败