почему свойство непрозрачности CSS не работает на кликнем изображении - PullRequest
Новая
       1

почему свойство непрозрачности CSS не работает на кликнем изображении

0 голосов
/ 16 января 2019

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

<!DOCTYPE html>
<html>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style type="text/css">
      .active{
      opacity: 0.7;
      }
   </style>
   <body>
      <h2 style="text-align:center">Lightbox</h2>
      <script type="text/javascript"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div id="main_img">
         <img id="img" src="https://via.placeholder.com/150" style="width: 10%; height: 10%;" onchange="q()">
      </div>
      <div id="thumb_img">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)' style="width: 10%; height: 10%;" id="first">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)'style="width: 10%; height: 10%;" id="first">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)'style="width: 10%; height: 10%;" id="first">
      </div>
      <script type="text/javascript">
         var sr
         function changeImage(obj){
           
           sr = $(obj).attr('src');
           /*alert(sr);*/
           $('#img').attr('src',sr);
            /*$('#img').removeClass('active');*/
           $("#first").addClass('active');    
         }
         
      </script>
   </body>
</html>

, как вы видели при щелчке по второму ряду, первое изображение устанавливается только как непрозрачное. Я хочу установить непрозрачность для любого изображения во втором ряду, по которому щелкнули

Ответы [ 3 ]

0 голосов
/ 16 января 2019

Это потому, что вы используете селектор идентификатора. Идентификатор может быть на странице только один раз, поэтому браузер берет первый элемент с идентификатором и игнорирует все остальные. Если вы хотите настроить таргетинг на несколько элементов, вам нужно добавить класс (а также селектор классов) следующим образом: 

<img class="img-changed" [...] >
<img class="img-changed" [...] >

$(".img-changed").addClass("active");
0 голосов
/ 16 января 2019

Это тоже работает. 

<script type="text/javascript">
     var sr
     function changeImage(obj){

       sr = $(obj).attr('src');
       $(obj).attr('src',sr);
       $(obj).addClass('active'); 
       $('#thumb_img').children().not(obj).removeClass('active'); //we can use not method
     }

</script>
0 голосов
/ 16 января 2019

Обновлен код. Имейте в виду, что класс active добавляется один раз и будет в DOM, если вы не удалите его. поскольку вы используете onclick и передаете это внутрь него, ваш обработчик должен использовать переданный объект, подобный этому $(obj).addClass('active');

<!DOCTYPE html>
<html>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style type="text/css">
      .active{
      opacity: 0.7;
      }
   </style>
   <body>
      <h2 style="text-align:center">Lightbox</h2>
      <script type="text/javascript"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div id="main_img">
         <img onclick='changeImage(this)' id="img" src="https://via.placeholder.com/150" style="width: 10%; height: 10%;" onchange="q()">
      </div>
      <div id="thumb_img">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)' style="width: 10%; height: 10%;" id="first">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)'style="width: 10%; height: 10%;" id="first">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)'style="width: 10%; height: 10%;" id="first">
      </div>
      <script type="text/javascript">
         var sr
         function changeImage(obj){
           
           sr = $(obj).attr('src');
           /*alert(sr);*/
           $(obj).attr('src',sr);
            /*$('#img').removeClass('active');*/
           $(obj).addClass('active'); 
            $(obj).siblings().removeClass('active');
         }
         
      </script>
   </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...