Question

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

他们可以自己设置手机，并在尝试激活多个辅助手机时收到提醒。如果他们试图禁用主要电话，也应告知他们致电客户服务部。（那部分正在发挥作用。）

从提供的代码中，您可以看到哪些部分正常工作。我在这里为一些例子硬编码了一些值。在示例代码中，我正在搜索＆＃39; longdesc＆＃39; 1234出现在可见图像中。

谁能说出我做错了什么？或者，如果有更好的方法来搜索1234中的值1234出现在次要＆＃39;中的可见图像中的次数。跨越？

＆＃13;

	
  $(".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;
}

＆＃13;

<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>

＆＃13;

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的多个选择器和其他帮助的东西。首先，感谢Edison和Scott的帮助。

我最终使用的最好用的是几个＆＃34;数据 - ＆＃34;元素和jquery中的复杂选择器语句。我们还决定不再允许多个二手手机，这使得答案有所不同，但现在这一切都完美无缺。

以下是新代码段：

＆＃13;

	$(".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();
		}
	});

＆＃13;

<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>

＆＃13;

如何使用相同的＆＃34; data-id＆＃34;来确定跨越多少可见图像。属性有相同的＆＃39; longdesc＆＃39;属性

2 个答案: