JQuery. Облицовочные проблемы с событиями щелчка

Я писал код для флип-игры для изображения в jquery, но перед началом работы с объектами кликов на изображении возникают проблемы. Проблемы возникают, когда я нажимаю одно изображение и снова нажимаю то же изображение, которое отлично работает, но если я нажму одно изображение, атрибут src изображения добавится в тег img, а затем, если я нажму любое другое изображение, атрибут src не будет добавлен к этому один для первого щелчка, потому что clickCounter имеет значение 1. Я использовал свою собственную логику (clickCounter). Я новичок в jquery. Вы можете предложить лучший способ сделать это. Заранее спасибо. Вот мой код.JQuery. Облицовочные проблемы с событиями щелчка

<style> 
     #main{ 
      height: 500px; 
      border: 1px solid blue; 
      margin: auto; 
     } 
     .myimg{ 
      width: 100px; 
      height: 100px; 
      background: lightblue; 
      background-position: center center; 
      margin: 10px; 
      float: left; 
      border-radius: 20px; 
     } 
    </style> 

<body> 
    <div id="main"> 

    </div> 
    <button id="add">Add</button> 

    <script src="jquery-1.11.2.js"></script> 
    <script> 
     var clickCounter = 0; 
     $('#add').click(function(){ 
      addElements(44); 
      $('#add').attr('disabled', 'true'); 
     }); 
     function addElements(times){ 
      var main = $('#main'); 
      for(j = 1; j <= times; j++){ 
       var i = document.createElement('img'); 
       var img = $(i); 
       img.click(function(){ 
        // $(this).css('background', 'url(back.png)'); 
        var myImage = $(this); 
        if(clickCounter == 0){ 
         myImage.attr('src', 'back.png'); 
         myImage.attr('width', '100'); 
         myImage.attr('height', '100'); 
         clickCounter = 1; 
        }else{ 
         myImage.removeAttr('src'); 
         clickCounter = 0; 
        } 
        //alert(clickCounter); 
       }); 
       img.addClass('myimg'); 
       main.append(img); 
      }  
     } 

    </script> 
</body>

JSFiddle

источник

2015-03-11 Hanzallah Afgan

проводки этот код интерактивный, проверяемый [jsfiddle] (https://jsfiddle.net) и дающий нам ссылку на него, поможет нам быстрее ответить на вопрос – Markasoftware

Какова цель 'clickCounter'? Что именно вы хотите совершить на событиях кликов? – dave

Вы должны использовать '.toggle()' для исправления второго щелчка, проверяет некоторые примеры [здесь] (http://api.jquery.com/toggle-event/) – leotesta

Проблема заключается в общей переменной clickCounter, которая распределяется между все элементы.

В этом случае, так как у вас есть динамические элементы, вы могли бы использовать event delegation, а затем использовать текущее src значение img, чтобы установить новый как

$('#add').click(function() { 
    addElements(44); 
    $('#add').prop('disabled', true); 
}); 

$('#main').on('click', '.myimg', function() { 
    $(this).attr('src', function (i, src) { 
     return src == 'back.png' ? '' : 'back.png'; 
    }).height(100).width(100); 
}) 

function addElements(times) { 
    var $main = $('#main'); 
    for (j = 1; j <= times; j++) { 
     $('<img />', { 
      'class': 'myimg' 
     }).appendTo($main) 
    } 
}

Демо: Fiddle

источник

2015-03-11 03:28:19

Связи благодарности. Хорошо –

Вместо счетчика, проверьте атрибут 'SRC', как показано ниже,

 $('#add').click(function(){ 
 
      addElements(44); 
 
      $('#add').attr('disabled', 'true'); 
 
     }); 
 
     function addElements(times){ 
 
      var main = $('#main'); 
 
      for(j = 1; j <= times; j++){ 
 
       var i = document.createElement('img'); 
 
       var img = $(i); 
 
       img.click(function(){ 
 
        // $(this).css('background', 'url(back.png)'); 
 
        var myImage = $(this); 
 
        var attr = $(this).attr('src'); 
 
        if(typeof attr == typeof undefined){ 
 
         myImage.attr('src', 'back.png'); 
 
         myImage.attr('width', '100'); 
 
         myImage.attr('height', '100');       
 
        }else{ 
 
         myImage.removeAttr('src'); 
 
         
 
        } 
 
        //alert(clickCounter); 
 
       }); 
 
       img.addClass('myimg'); 
 
       main.append(img); 
 
      }  
 
     }

#main{ 
 
      height: 500px; 
 
      border: 1px solid blue; 
 
      margin: auto; 
 
     } 
 
     .myimg{ 
 
      width: 100px; 
 
      height: 100px; 
 
      background: lightblue; 
 
      background-position: center center; 
 
      margin: 10px; 
 
      float: left; 
 
      border-radius: 20px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="main"> 
 

 
    </div> 
 
    <button id="add">Add</button>

источник

2015-03-11 03:26:20 Vim

Хорошо. Благодарю. –

@Arun P Johny. Какую логику следует использовать для того, чтобы использовать один источник изображения два раза только случайным образом, но не более чем в два раза того же изображения. –

JQuery. Облицовочные проблемы с событиями щелчка

ответ

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