Question

我正在尝试触发特定ID上的特定CSS，但它只影响该ID的一个图像，而不是所有具有该ID的图像。另外，如果再次单击同一触发器，如何回滚更改？

这是我正在使用的HTML。

<div class="row">
    <div class="container">
        <div class="col-sm-3">
            <img src="https://imagesonline.bl.uk/coo/user/gpimages/Images_Online_Cooliris_Logo.jpg" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://www.niemanlab.org/images/getty-images-logo.png" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://cdn.eso.org/images/thumb300y/eso1119b.jpg" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://www.niehs.nih.gov/news/newsroom/releases/2013/august19/tbbpa_image_.jpg" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://learningdesign.psu.edu/themes/site_themes/agile_records/images/uploads/LDImages/itsupport2.jpg" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://dummyimage.com/300" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-12 tac">
            <br><br><br><button>test</button>
        </div>
    </div>
</div>

你好，世界！

这是我正在使用的javascript。

<script>
$('#image').click(function() {
    $('#some').css({
        'background-color': 'black',
        'color': 'white',
        'font-size': '44px',
        'opacity': '0.1'
    });
});
</script>

Answer 1

问题是您需要使用UNIQUE ids。而是使用class：

$('.img-responsive').css({
    'background-color': 'black',
    'color': 'white',
    'font-size': '44px',
    'opacity': '0.1'
});

此外，永远不要使用重复的ids，ID在整个文档中都应为唯一。

如果要回滚更改，请使用类。还有其他方法，但我觉得这是最好的方法。

CSS：

.class1{
    background-color: black;
    color: white;
    font-size: 44px;
    opacity: 0.1;
  }

Jquery的：

$('.img-responsive').toggleClass('class1');

Answer 2

对于多个元素，您应该使用class而不是id。对于角色扮演，您可以使用Toggle Class | jQuery UI尝试如下：

<style>
    .active{
        background-color: black;
        color: white;
        font-size: 44px;
        opacity: 0.1;
    }
</style>

<强> JS

$('#image').click(function() {
    $('.img-responsive').toggleClass('active');
});

注意：单页中的多个元素不应该相同id，否则它将始终考虑第一个。

Answer 3

试试这个：

SELECT CAST(ROUND((1.0*tableA.Col1-tableA.Col2) / (TablbeB.Col1), 0) as integer)
FROM  tableA
    JOIN TablbeB ON tableA.id - TablbeB .id

只需回滚使用此代码：

$('#image').click(function() {
   $('.img-responsive').css({
   'background-color': 'black',
   'color': 'white',
   'font-size': '44px',
   'opacity': '0.1'
  });
});

Answer 4

要回滚到先前的状态，请尝试使用jquery的切换方法

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

你可以在toggle方法中传递两个函数作为参数，jquery将一次调用一个方法。

jQuery click / toggle between two functions

查看链接以获取更多帮助和示例。

如何在特定ID上触发onclick CSS

4 个答案: