如何确定跨度内具有相同“ data-id”属性的可见图像具有相同的“ longdesc”属性

Question

我正在尝试这样做，以便当某人启用多个辅助电话时，会提醒他们可能会收费。 他们可以有一个主要的和一个次要的。

他们能够将电话设置为活动状态，并且当他们尝试激活多个辅助电话时，应该提醒他们。 如果尝试禁用主电话，也应告知他们致电客户服务。 （该部分正在工作。）

从提供的代码中，您可以查看正在工作的部分。 我在这里将一些值硬编码为示例。 在示例代码中，我正在搜索可见图像中1234的“ longdesc”出现多少次。

谁能告诉我我做错了吗？ 或者，如果有更好的方法来搜索“次要”跨度的可见图像中值1234出现多少次？

 $(".tog").click(function(){ var id = $(this).attr('id'); var option = $(this).attr('name'); if (option == "primary") { alert("Please call customer service to set the Primary phone on the account."); } else { $('img',this).toggle(); if (search($(this).find('img').attr('longdesc')) > 1) document.getElementById('alert').value = "More than 1 selected."; else document.getElementById('alert').value = "1 or less selected."; } }); function search(v) { var numfound = 0; var out = document.querySelectorAll('img[longdesc]' == v); [].forEach.call(out, function(x) { numfound++; }); return numfound; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Primary Phone <span name="primary" data-id="784" class="tog"> <img longdesc="1234" alt="on" align="top" style="width:22px" src="http://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" /> <img alt="off" align="top" style="display:none;width:22px" src="https://www.sfpcu.org/UserControls/BrowserDetection/images/red-x-mark.png" /></span> Second Phone <span name="secondary" data-id="784" class="tog"> <img longdesc="1234" alt="on" align="top" style="display:none;width:22px" src="http://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" /> <img alt="off" align="top" style="width:22px" src="https://www.sfpcu.org/UserControls/BrowserDetection/images/red-x-mark.png" /></span> Third Phone <span name="secondary" data-id="784" class="tog"> <img longdesc="1234" alt="on" align="top" style="width:22px" src="http://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" /> <img alt="off" align="top" style="display:none;width:22px" src="https://www.sfpcu.org/UserControls/BrowserDetection/images/red-x-mark.png" /></span> <span id='alert'></span> 

Answer 1

ID不能重复。 如果对此应用任何逻辑，则仅考虑ID的首次出现。 尝试使用类代替。

HTML：

<span>
 <img src="" class="class1" longdesc="123" /> 
 <img src="" class="class2" longdesc="123" /> 
 <img src="" class="class1" /> 
 <img src="" class="class1" /> 
 <img src="" class="class1" longdesc="123" /> 
</span>

jQuery的：

var count = 0;

$(".class1").each(function( el) {
  if($(this).attr('longdesc'))
    count++;
});

我希望这有帮助！ :)

Answer 2

万一有人在搜索这个，我发现jquery的多个选择器和其他有用的东西。 首先，感谢爱迪生和斯科特的帮助。

我最终使用的效果最好的是jquery中的几个“ data-”元素和一个复杂的选择器语句。 我们还决定完全不允许使用多个辅助电话，这使答案有所不同，但现在一切正常。

这是新的代码段：

  $(".tog").click(function(){ var id = $(this).attr('data-phone-id'); var option = $(this).attr('data-name'); var contactId = $(this).attr('data-contactId'); var el = this; var found = $("span[data-name='"+option+"'][data-contactId='"+contactId+"'][data-phone-id!="+id+"]"); found.each(function(){ var thisspan = this; var image = $("img[alt='on']:visible",this); image.each(function() { $('img',thisspan).toggle(); }); }); if (option == "primary") { alert("Please call customer service to set the Primary phone on the account."); } else { $('img',el).toggle(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Primary Phone <span data-phone-id="121" data-name="primary" data-contactId="784" class="tog"> <img longdesc="1234" alt="on" align="top" style="width:22px" src="http://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" /> <img alt="off" align="top" style="display:none;width:22px" src="https://www.sfpcu.org/UserControls/BrowserDetection/images/red-x-mark.png" /></span> Second Phone <span data-phone-id="122" data-name="secondary" data-contactId="784" class="tog"> <img longdesc="1234" alt="on" align="top" style="display:none;width:22px" src="http://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" /> <img alt="off" align="top" style="width:22px" src="https://www.sfpcu.org/UserControls/BrowserDetection/images/red-x-mark.png" /></span> Third Phone <span data-phone-id="123" data-name="secondary" data-contactId="784" class="tog"> <img alt="on" align="top" style="width:22px" src="http://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" /> <img alt="off" align="top" style="display:none;width:22px" src="https://www.sfpcu.org/UserControls/BrowserDetection/images/red-x-mark.png" /></span> <span id='alert'></span>