Question

我在业余时间学习jquery，以帮助提高我的网站制作技巧。我认为这是一个简单的解决方案，但是在花了好几个小时试图让它工作之后，我已经求助于一些或任何帮助。

背景资料：

我使用jquery编写一个简单的表单。这是用于订购汽车零件的表格。有一个复选框，当点击时，会显示另外4个“额外”选项，每个选项都有一个小缩略图，文本和文本。他们自己的复选框。我希望它的工作方式是，除非用户选中了“额外选项”复选框，否则不应出现额外的选择（他们的图像，文本，复选框）。一旦取消选中额外选项复选框，显示的选项就会消失。

我有上述工作部分正在工作。我坚持的部分是当用户选择额外的选择（例如轮胎，消声器等）时，我希望图像周围的边框突出显示。我有一个名为'img.selected'的css类，我打算用它来显示正在突出显示的边框。所以我知道我需要做的，但无法弄清楚，是使用jquery引用css类。当选择图像缩略图时，它应该突出显示，反之亦然，当通过复选框取消选择时，突出显示/边框应该消失。

以下是我用于隐藏/显示额外部分选项的代码：

    $("#extraPartsContainer").hide();    /* Hidding by default textbox */
$('#chkWantsExtraParts').click(function() {  /* This will check that checkbox is       clicked */
     if( $(this).is(':checked') ) { /* checking checkbox is checked or not */
         $("#extraPartsContainer").show(); /* showing hide div if checkbox is checked */
     } else {
            $("#extraPartsContainer").hide(); /* hiding div if checkbox is unchecked */
     }
});

有什么想法吗？我想也许一个简单的toggleClass会起作用。或者再次使用.hide（）。show（）？

Answer 1

您可以使用jQuery函数addClass（）将类添加到元素中。 e.g。

   $('#yourimg').addClass('img.selected');

和相应的removeClass（）将删除该类。

Answer 2

你看起来像这样吗

http://api.jquery.com/even-selector/

：甚至是选择器

或jquery .toggle()

http://api.jquery.com/toggle/

我不读你的整个故事： - （

Answer 3

您将使用CSS类来控制图像的边框。您的课程将在应用图片时为图片添加边框。

要添加或删除该类，可以使用jQuery的addClass（）和removeClass（）：

$( '#theImage' ).addClass('highlightBorder');
$( '#theImage' ).removeClass('highlightBorder');

JQuery - 隐藏/显示复选框＆amp;图像突出显示/边框

3 个答案: