0
我現在感到困惑和沮喪，來這裏尋找一些啓發。在這片標記javascript函數調用兩次
jQuery('#elements_hidden .vign').on('click', function(e)
{
var valid = '/img/site/valid.png';
var unvalid = '/img/site/unvalid.png';
var anchor = jQuery(this).next('.valid');
var anchor_block = jQuery(this);
var list = jQuery(this).parents('li').parents('ul').children('li');
var state = anchor.attr('src');
console.log('state:' + state);
jQuery(list).each(function(index, val)
{
jQuery(val).children('.valid').attr('src',unvalid);
jQuery(val).children('.vign').attr('src',jQuery(val).children('.vign').attr('src').replace('on.png','off.png'));
});
if (anchor.attr('src') == unvalid)
{
anchor.attr('src',valid);
anchor.siblings('.vign').attr('src', anchor.siblings('.vign').attr('src').replace('off.png','on.png'));
if(state != unvalid)
{
anchor.attr('src',unvalid);
anchor.siblings('.vign').attr('src',anchor.siblings('.vign').attr('src').replace('on.png','off.png'));
}
}
});
：
我這個工作的JS函數
<!-- html markup -->
<div id="elements_hidden" style="z-index: 0">
<div class="moteur">
<ul id="moteur">
<li>
<img data-optionCode="12" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
<li>
<img data-optionCode="2T" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
<li>
<img data-optionCode="4T" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
</ul>
</div>
<div class="couleur">
<ul id="couleur">
<li>
<img data-optionCode="0MP50NP5" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
<li>
<img data-optionCode="0MP60NP6" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
</ul>
</div>
<div class="selle">
<ul>
<li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
</ul>
</div>
<div class="jonc">
<ul>
<li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
</ul>
</div>
<div class="retros">
<ul>
<li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
</ul>
</div>
<div class="signature">
<ul>
<li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
</ul>
</div>
<div class="rangement">
<ul id="rangement">
<ul>
<li>
<img data-optionCode="DAKP7" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
<li>
<img data-optionCode="DAKR1" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
</ul>
<ul>
<li>
<img data-optionCode="DLU01" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
</ul>
<ul>
<li>
<img data-optionCode="DPQ01" class="vign" src="/img/site/vign/vign_off.png" />
<img class="valid" src="/img/site/unvalid.png" />
</li>
</ul>
</ul>
</div>
<div class="confort">
<ul>
<li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
</ul>
</div>
<div class="perso">
<ul>
<li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
</ul>
</div>
</div>
當用戶點擊了與類VIGN該功能的任何元素被觸發兩次，因爲我在控制檯日誌中看到兩行，而只有一次點擊。
這個事實打破了這個功能的目標，因爲第二次被更改爲活動（有效）的圖像被設置爲無效（無效）。
有沒有圍繞任何忍者可以解釋爲什麼它被觸發兩次，或者如果我對此感到困惑，爲什麼圖像從未改變，當用戶點擊。
我會感激。感謝您的閱讀時間。
問候
編輯：那種之後將信息回覆
如果我修改的標記只是爲了測試添加一個id的元素之一，讓我們說：
<img id="moteur_vignette" data-optionCode="<?php echo $optionCode ?>" class="vign" src="<?php echo $this->basePath()?>/img/site/vign/vign_off.png" />
裏面的div-> class-> moteur
我改變了選擇器將函數附加到th在單擊事件：
jQuery('#moteur_vignette').on('click', function(e) {
...
}
的解釋之後，如果我很明白它也不會轉回去要被觸發兩次，但它確實。所以我仍然感到困惑。
元素是否相互重疊？由於我沒有CSS或輸出，因此我無法分辨。 –
你可以請創建一個小提琴嗎？我不完全遵循你的問題，但它可能有可能你已經把點擊處理程序註冊兩次的代碼... –