javascript - 根据数据属性选择被点击的元素

Question

我正在开发一个私有(private)教练网站，您可以在该网站上选择训练类(class)的时间。有 6 种时间可用:5 分钟、10 分钟、15 分钟等。 This是我到目前为止所拥有的。

我想突出显示您选择的时间。我只尝试在最上面一行实现这个，当你点击一个时间来突出显示它时，其他的不会被突出显示，但这不是我问这个问题的原因。我的问题是，当您点击某个时间时，没有任何反应。我试过查看控制台，这是它抛出的错误:

我的代码有什么问题？

$("body").append(
	"<p class='text' id='CYTText'>Choose your session's time:</p>"
);
setUpCYT(350, 200, 0.8, 0.85);

function setUpCYT(littleXOffset, littleYOffset, littleScale, littleOpacity) {
	
	for (i = 1; i < 4; i++) {
		var timeSelectorElement = "[data='" + i + "']";
		var timeSelectorName = "timeSelector"+i;
		
		$("body").append(
			"<p class='text' id='CYTTimerText' data='" + i + "' onclick='selectTime(" + timeSelectorElement + ")'>00:00</p>"
		);
		$("[data='" + i + "']").css({"left":littleXOffset * (i-2), "-webkit-transform":"scale(" + littleScale + ")", "opacity":littleOpacity});
		
		timeSelectorName = new Timer(timeSelectorElement);
		timeSelectorName.set(i*5,0);
		
	}
		
	for (i = 1; i < 4; i++) {
		$("body").append(
			"<p class='text' id='CYTTimerText' data='" + i+3 + "'>00:00</p>"
		);
		$("[data='" + i+3 + "']").css({"top":littleYOffset, "left":littleXOffset * (i-2), "-webkit-transform":"scale(" + littleScale + ")", "opacity":littleOpacity});
		var timeSelectorElement = "[data='" + i+3 + "']";
		var timeSelectorName = "timeSelector"+i+3;
		timeSelectorName = new Timer(timeSelectorElement);
		timeSelectorName.set((i+3)*5,0);
	}
	
	//select the middle
	
	selectTime("[data='2']");
}

function selectTime(data) {
		TweenLite.to($(data), 0.5, {
			"-webkit-transform":"scale(1)",
			"opacity":1
		});
	}



//timer function
function Timer (element) {

var minutes, seconds, finalTimeInSeconds, displayMinutes, displaySeconds, interval = 1000, self = this, timeLeftToNextSecond = 1000, running = false;

	this.set = function(inputMinutes, inputSeconds) {
		
		finalTimeInSeconds = inputMinutes * 60 + inputSeconds;
		minutes = (Math.floor(finalTimeInSeconds / 60));
		seconds = finalTimeInSeconds % 60;
		
		this.print();
	}
	
	this.add = function(inputMinutes, inputSeconds) {
	
		finalTimeInSeconds += inputMinutes * 60 + inputSeconds;
		finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds;
		minutes = (Math.floor(finalTimeInSeconds / 60));
		seconds = finalTimeInSeconds % 60;
		
		this.print();
	}
	
	this.subtract = function(inputMinutes, inputSeconds) {

		finalTimeInSeconds -= inputMinutes * 60 + inputSeconds;
		if(finalTimeInSeconds < 0) {nextTask()}
		finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds;
		minutes = (Math.floor(finalTimeInSeconds / 60));
		seconds = finalTimeInSeconds % 60;
	
		this.print();
	}
	
	this.reset = function() {
		
		this.set(0,0);
	}
	
	this.print = function() {
	
		displayMinutes = (minutes.toString().length == 1) ? "0" + minutes : minutes;	//ternary operator: adds a zero to the beggining 
		displaySeconds = (seconds.toString().length == 1) ? "0" + seconds : seconds;	//of the number if it has only one caracter.
		
		$(element).text(displayMinutes + ":" + displaySeconds);
	}
	
	this.run = function() {
		
		if (running == false) {
			running = true;
			
			var _f = function() {
				secondStarted = new Date;
				self.subtract(0, 1);
				interval = 1000;
				
				var theColorIs = $(element).css("color");
				ac = setTimeout(_f,interval);
			}
			ac = setTimeout(_f, interval);
			
			
		}
	}
	
	this.stop = function() {
	
		if (running == true) {
			running = false;
			
			stopped = new Date;
			interval = 1000 - (stopped - secondStarted);
			clearTimeout(ac);
		}
	}

}

body{
	background-color: #02BFC1;
	overflow:hidden;
	margin: 0;
	}

@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: normal;
src: local('Bebas Neue'), url('BebasNeue.woff') format('woff');
    }

.text {
	color: #F1F2F0;
	font-family:Bebas Neue;
	-webkit-user-select: none;
	cursor: default;
	text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
	}

#CYTText {
	text-align:center;
	height: 100px;
	position: absolute;
	margin: auto;
	top: 0;
    bottom: 290px;
    right: 0;
    left: 0;
	font-size:50px;
	}

#CYTTimerText {
	text-align:center;
	height: 100px;
	position: absolute;
	margin: auto;
	top: 0;
    bottom: 150px;
    right: 0;
    left: 0;
	font-size:95px;
	}	

Answer 1

语法错误是由您传递给 append() 的字符串引起的:

$("body").append(
        "<p class='text' id='CYTTimerText' data='" + i +
        "' onclick='selectTime(" + timeSelectorElement + ")'>00:00</p>"
);

让我们打印这个字符串的实例并检查它:

<p class='text' id='CYTTimerText' data='1' onclick='selectTime([data='1'])'>00:00</p>

观察到 onclick 处理程序是由单引号分隔的代码片段:

onclick='selectTime([data='

我们可以通过用转义双引号替换单引号来解决这个问题:

$("body").append(
        "<p class='text' id='CYTTimerText' data='" + i +
        "' onclick=\"selectTime(" + timeSelectorElement + ")\">00:00</p>"
);

但是，现在我们遇到了另一个问题。字符串的一个实例如下所示:

<p class='text' id='CYTTimerText' data='1' onclick="selectTime([data='1'])">00:00</p>

onclick 的代码是 selectTime([data='1'])，这在语法上是不正确的。目的是将字符串 "[data='1']" 传递给 selectTime。

内联 HTML 已经使用双引号来分隔 onclick 值。我们如何在这个值中加上双引号？我们必须为每个双引号使用 ":

$("body").append(
        "<p class='text' id='CYTTimerText' data='" + i + "' onclick=\"selectTime(&quot;" + timeSelectorElement + "&quot;)\">00:00</p>"
);

现在字符串的实例如下所示:

<p class='text' id='CYTTimerText' data='1' onclick="selectTime(&quot;[data='1']&quot;)">00:00</p>

这看起来很奇怪，但一旦插入到文档中就会正确。

进行更改后，代码可以正常工作。它仍然不正确，因为你有布局问题，但至少你可以点击 15:00 时间并看到 onclick 处理程序正确调用 selectTime。

顺便说一句，有比构建那个复杂的字符串更好的方法。您可以将内联处理程序简化为 onclick="selectTime(this)"，其中 this 将具有被单击对象的值。一个更好的方法是避免内联处理程序定义。相反，构建一个段落对象并创建一个您指定为点击处理程序的新函数。

无论您如何实现 onclick 处理程序，您都会遇到计时器元素重叠的问题。你的计时器是你绝对放在一起的段落。段落尽可能宽。因此，第一个计时器会被后续计时器遮挡。

您可以通过将计时器显示为 inline-block 元素来消除重叠。要限制布局的宽度，请将所有内容放入包装器 div 中。以下代码段演示了这种方法。

window.onload = function () {
  $('#wrapTimers').append(
    "<p class='text' id='CYTText'>Choose your session duration:</p>"
  );
  setUpCYT(350, 200, 0.8, 0.85);
};

function setUpCYT(littleXOffset, littleYOffset, littleScale, littleOpacity) {

  for (i = 1; i < 4; i++) {
    var timeSelectorElement = "[data='" + i + "']";
    var timeSelectorName = "timeSelector"+i;

    var s = "<p class='text timerContainer' data='" + i +
        "' onclick=\"selectTime(this)\">00:00</p>";
        //"' onclick=\"selectTime(&quot;" + timeSelectorElement + "&quot;)\">00:00</p>";
    $('#wrapTimers').append(s);
    $("[data='" + i + "']").css({"left":littleXOffset * (i-2), "-webkit-transform":"scale(" + littleScale + ")", "opacity":littleOpacity});

    timeSelectorName = new Timer(timeSelectorElement);
    timeSelectorName.set(i*5,0);

  }

  for (i = 1; i < 4; i++) {
    $('#wrapTimers').append(
      "<p class='text timerContainer' data='" + i+3 + "'>00:00</p>"
    );
    $("[data='" + i+3 + "']").css({"top":littleYOffset, "left":littleXOffset * (i-2), "-webkit-transform":"scale(" + littleScale + ")", "opacity":littleOpacity});
    var timeSelectorElement = "[data='" + i+3 + "']";
    var timeSelectorName = "timeSelector"+i+3;
    timeSelectorName = new Timer(timeSelectorElement);
    timeSelectorName.set((i+3)*5,0);
  }

  //select the middle

  selectTime("[data='2']");
}

function selectTime(selector) {
    TweenLite.to($(selector), 0.5, {
      "-webkit-transform":"scale(1)",
      "opacity":1
    });
  }



//timer function
function Timer (element) {

var minutes, seconds, finalTimeInSeconds, displayMinutes, displaySeconds, interval = 1000, self = this, timeLeftToNextSecond = 1000, running = false;

  this.set = function(inputMinutes, inputSeconds) {

    finalTimeInSeconds = inputMinutes * 60 + inputSeconds;
    minutes = (Math.floor(finalTimeInSeconds / 60));
    seconds = finalTimeInSeconds % 60;

    this.print();
  }
  this.add = function(inputMinutes, inputSeconds) {

    finalTimeInSeconds += inputMinutes * 60 + inputSeconds;
    finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds;
    minutes = (Math.floor(finalTimeInSeconds / 60));
    seconds = finalTimeInSeconds % 60;

    this.print();
  }

  this.subtract = function(inputMinutes, inputSeconds) {

    finalTimeInSeconds -= inputMinutes * 60 + inputSeconds;
    if(finalTimeInSeconds < 0) {nextTask()}
    finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds;
    minutes = (Math.floor(finalTimeInSeconds / 60));
    seconds = finalTimeInSeconds % 60;

    this.print();
  }

  this.reset = function() {

    this.set(0,0);
  }

  this.print = function() {

    displayMinutes = (minutes.toString().length == 1) ? "0" + minutes : minutes;  //ternary operator: adds a zero to the beggining
    displaySeconds = (seconds.toString().length == 1) ? "0" + seconds : seconds;  //of the number if it has only one caracter.

    $(element).text(displayMinutes + ":" + displaySeconds);
  }

  this.run = function() {

    if (running == false) {
      running = true;

      var _f = function() {
        secondStarted = new Date;
        self.subtract(0, 1);
        interval = 1000;

        var theColorIs = $(element).css("color");
        ac = setTimeout(_f,interval);
      }
      ac = setTimeout(_f, interval);


    }
  }

  this.stop = function() {

    if (running == true) {
      running = false;

      stopped = new Date;
      interval = 1000 - (stopped - secondStarted);
      clearTimeout(ac);
    }
  }

}

body {
  background-color: #02BFC1;
  overflow: hidden;
  margin: 0;
}

#wrapTimers {
  width: 800px;
  margin: 40px auto;
  text-align: center;
}

.text {
  color: #F1F2F0;
  font-family: Oswald, sans-serif;
  -webkit-user-select: none;
  cursor: default;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}

#CYTText {
  width: 800px;
  margin: auto;
  font-size: 50px;
}

.timerContainer {
  text-align: center;
  display: inline-block;
  font-size: 95px;
  margin: 0 10px;
}

<link rel="stylesheet" type="text/css"
 href="https://fonts.googleapis.com/css?family=Oswald" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>

<div id="wrapTimers"></div>