javascript - 勾选以在按钮上显示按钮并在单击时降低其不透明度

Question

我希望在单击按钮后显示一个勾号并降低其不透明度。

#btnTicketType{
    margin-bottom:2%;
    margin-top:10%;
    width:95%;
    height:15em;
    font-size:1.5em;
}

#seatnumber{
    display:block; 
    width:100%; 
    text-align:center;
    font-size:1em;
}

#rectangle{
    height:100%;
    width:100%;
    overflow:auto;
    outline-color:black;
    outline-style:solid;
}

<div id="rectangle">
        <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 1</button>
            <small id="seatnumber">Text 1</small>
        </div>
                <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 2</button>
            <small id="seatnumber">Text 2</small>
        </div>
                <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 3</button>
            <small id="seatnumber">Text 3</small>
        </div>
}
</div>
<br />

如果在勾号显示后也降低按钮的不透明度，这样勾号对用户来说会更加突出，那就太好了。

Answer 1

我创建了一个 HTML/CSS/JavaScript 代码段来执行以下操作:

1. 在每个按钮上包含一个“勾号”；和
2. 单击按钮后，它会淡出

您可以在 JSFiddle 上看到一个工作示例.

你的问题有点令人困惑，因为问题标题和正文说的是不同的东西:

Display Tick on button and reduce opacity when its clicked

对比:

I would like for a tick to be shown on a button once it is clicked.

可以轻松修改此代码段的 CSS 以实现任一结果。

工作片段

$( '.btnTicketType' ).click(function() {
  $(this).addClass('clicked-button');
});

.btnTicketType {
    margin-bottom: 2%;
    margin-top: 10%;
    width: 95%;
    height: 15em;
    font-size: 1.5em;
    transition: all 1s;
}

.seatnumber{
    display: block; 
    text-align: center;
    font-size: 1em;
}

#rectangle{
    overflow: auto;
    outline-color: black;
    outline-style: solid;
}

.clicked-button {
    opacity: .1;
}

<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rectangle">
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 1
        </button>
        <small class="seatnumber">Text 1</small>
    </div>
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 2
        </button>
        <small class="seatnumber">Text 2</small>
    </div>
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 3
        </button>
        <small class="seatnumber">Text 3</small>
    </div>
</div>

附加说明

1. A <button>元素是 semantically valid :

   The HTML <button> element represents a clickable button.

2. A <button>元素 can contain other HTML elements如果需要:

   <button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute.

3. 基于以上定义，我使用了Font Awesome添加 check icon到你的按钮。

4. 您的 HTML 错误地重复使用了 ID 属性。一个id="btnTicketType"属性必须是唯一的，并且不能在有效的 HTML 中重复使用。如果您需要为多个元素设置样式，最好使用 class="btnTicketType"反而。对于代码段中的 HTML，我将重复的 ID 属性替换为类。

5. 如果您使用 <button> <form> 中的元素, value=""属性将与表单一起提交。来自MDN documentation :

value
The initial value of the button. It defines the value associated with the button which is submitted with the form data. This value is passed to the server in params when the form is submitted.