为什么'attr'只适用于第一个元素

Question

我有一个简单的功能：取决于是否点击了一个按钮，如果attr发生这种情况，我会存储。

行为是：首先单击任何项​​目列表，然后单击“Item1”或“Item2”。 如果已单击任何项​​目列表，则背景必须更改为红色。否则必须变为粉红色。

它似乎有用，但是当我尝试测试它时，只有在点击的项目列表是第一个时才有效。

还使用this question上的data()进行了尝试，但使用了same result。

我用'hasClass'实现了我想要的东西，但我不知道我的功能有什么问题。为什么这只适用于data或attr的第一个元素？

	$("footer ul li").on("click", function() {
		$(this).attr('data-clicked', 'true');
	  });




	$("dl dt").click( function () {
		if ($("footer ul li").attr("data-clicked")) {
			$("body").css("background", "red");
		} else {
			$("body").css("background", "pink");
		};
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<footer>
<ul>
    <li id="#foo">Item list 1</li>
    <li id="#bar">Item list 2</li>
</ul>

<dl>
<dt>Item 1</dt>

    <dd>Description 1</dd>
<dt>Item 2</dt>

    <dd>Description 2</dd>
</dl>
    </footer>

Answer 1

在这种情况下，请参阅手册/文档。如jQuery API documentation on .attr()中所述：

  

获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

.data()也不例外：

  

存储与匹配元素关联的任意数据，或者在匹配元素集中的第一个元素的指定数据存储中返回值。