Question

我是网络开发的绝对新手。我有一个html，css和javascript文件。我想简单地改变按钮的背景颜色，但遗憾的是它不起作用。所有文件（包括jquery库）都放在一个文件夹中。任何线索都表示赞赏。

html文件：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapsActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!-- other content in the activity -->

        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/map"

            android:name="com.google.android.gms.maps.SupportMapFragment" />

    </LinearLayout>

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--  floating action menu with buttons -->

        <com.getbase.floatingactionbutton.FloatingActionsMenu
            android:id="@+id/right_labels"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            fab:fab_addButtonColorNormal="@color/white"
            fab:fab_addButtonColorPressed="@color/secondary_text"
            fab:fab_addButtonPlusIconColor="@color/accent_dark"
            fab:fab_addButtonSize="mini"
            fab:fab_labelStyle="@style/menu_labels_style"
            fab:fab_labelsPosition="right"
            android:layout_gravity="right|bottom">

            <com.getbase.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@color/white"
                fab:fab_title="Label on the right"
                fab:fab_colorPressed="@color/secondary_text"/>

            <com.getbase.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                fab:fab_colorNormal="@color/white"
                fab:fab_size="mini"
                fab:fab_title="Another one on the right"
                fab:fab_colorPressed="@color/secondary_text"/>

        </com.getbase.floatingactionbutton.FloatingActionsMenu>

    </FrameLayout>
</FrameLayout>

css文件：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-3.1.0.min.js"></script> 
    <script src="code.js"></script>
  </head>
  <body>
    <button class="button">Click!</button>
  </body>
</html>

javascript代码：

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button_clicked {
    background-color: #ff0000;
}

Answer 1

这只是一个简单的错字。请注意，您的变量名称定义为clicked，但jQuery中的函数为click()。因此，如果您进行以下更改，它应该可以正常工作：

var clicked = function(){
$('.button').click(function(){
    $(this).toggleClass("button_clicked");
});
};

$(document).ready(clicked);

Answer 2

试用此代码：

function change_color()
{
  var NAME = document.getElementById("button");
    var currentClass = NAME.className;
    if (currentClass == "button") { // Check the current class name
        NAME.className = "button_clicked";   // Set other class name
    } else {
        NAME.className = "button";  // Otherwise, use `second_name`
    }   
}

.button ,.button_clicked {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button_clicked {
    background-color: #ff0000;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.1.0.min.js"></script> 
<script src="code.js"></script>
</head>

<body>
<button class="button" id="button" onclick="change_color()">Click!</button>
</body>
</html>

Answer 3

您不需要命名函数 - 直接指定单击事件行为以单击按钮：

$(document).ready(function(){
    $('.button').click(function(){
        $(this).toggleClass("button_clicked");
      });
});

$(document).ready(function(){
  $('.button').click(function(){
    $(this).toggleClass("button_clicked");
    });
  });

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button_clicked {
    background-color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="button">Click Me</button>

无法加载jQuery代码

3 个答案: