Question

一旦检查了三个单选按钮中的一个，我试图突出显示一个保存按钮。

然后，一旦用户点击保存按钮，它就会丢失高亮类并恢复正常，用户也可以单击取消按钮，保存按钮将失去高亮效果。

[TestMethod]
[DataSource("TfsDataSource")]
public void Test1()
{
     string expected = "t1";
     string actual = TestContext.DataRow["actual"].ToString();
     Assert.AreEqual(expected, actual);
}

现在它只会在单选按钮检查时突出显示保存按钮，当我单击按钮时它不会再次丢失该类。

jsFiddle

Answer 1

您在data()语句中使用if的setter而不是getter。您的代码中还存在一些语法问题。

为了更有效地执行此操作，您可以挂钩无线电的change事件并使用toggleClass()，如下所示：

$('input[type=radio]').change(function() {
    $('.greyBtn').toggleClass('glow', this.checked);
});

@keyframes glowing {
    0% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }
    50% {
        background-color: #FF0000;
        box-shadow: 0 0 20px #FF0000;
    }
    100% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }
}

.glow {
    animation: glowing 1500ms infinite;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input name="radio" type="radio">One</label><br/>
<label><input name="radio" type="radio">Two</label>
<label><input name="radio" type="radio">Three</label>

<input type="submit" value="Gem" class="greyBtn" />
<input type="submit" value="Cancel" class="cancel" />

Answer 2

为什么不为“$（'label'）之外的按钮创建'click'事件。点击”event？

 $('.greyBtn').click(function() {
      $('greyBtn').removeClass('glow'); 
 });

Answer 3

您可以使用点击功能执行此操作。这是我的fiddle

geckodriver

选中单选按钮时突出显示按钮

3 个答案: