Как я могу вызвать CSS onclick для определенного идентификатора

Я пытаюсь вызвать конкретный CSS на конкретном идентификаторе, но он производит только одно изображение этого идентификатора, а не все изображения с этим ID. Также, как мне отменить изменения, если я снова нажму на тот же триггер?Как я могу вызвать CSS onclick для определенного идентификатора

Это 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>

источник

2015-05-23 Kristie Matthew

Идентификатор должен быть уникальным классом использования вместо – Akshay

Спасибо @ Akshay, который сработал! Не могли бы вы рассказать мне, как я могу отменить изменения в нормальном режиме, если я снова нажму на тот же триггер? –

Вы можете попробовать 'toggleClass()' вместо – Akshay

Вы должны использовать class вместо id для нескольких элементов. для roleback вы можете использовать Toggle Class | jQuery UI Попробуйте, как показано ниже:

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

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

Примечание: Там не должно быть таким же id для нескольких элементов в одной странице иначе он всегда будет рассматривать первый ,

источник

2015-05-23 07:21:01

Попробуйте это:

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

И откатить просто использовать этот код:

$(".img-responsive").removeAttr("style");

источник

2015-05-23 07:14:52

Пока это будет работать, но это также удалит другие встроенные стили, если таковые имеются. – Zee

Да ... но у OP нет других требований, кроме этого: D –

Проблема в том, что вам нужно использовать UNIQUE ids. Вместо того, чтобы использовать class:

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

Кроме того, никогда не используйте дубликат ids, идентификаторы предназначены для уникального по всему документу.

Если вы хотите отменить изменения, вместо этого используйте классы. Есть и другие подходы, но я считаю, что это лучший.

CSS:

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

Jquery:

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

источник

2015-05-23 07:15:08 Zee

Спасибо @zee. Не могли бы вы рассказать мне, как мне отменить изменения? –

Будет ли это окончательный сценарий, который я должен использовать? –

Чтобы вернуться к предыдущему состоянию попробуйте использовать метод переключения JQuery в

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

вы можете передать две функции в тумблера метод как параметры и jquery вызовут каждый метод один на IME.

jQuery click/toggle between two functions

проверить ссылку для получения дополнительной помощи и примера.

источник

2015-05-23 07:20:14

Как я могу вызвать CSS onclick для определенного идентификатора

ответ

Смежные вопросы