Question

我在私人教练网站上工作，让您选择培训课程的时间。有6次可用：5分钟，10分钟，15分钟，等等。 This是我到目前为止所拥有的。

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

我的代码出了什么问题？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

有几个简单的问题。首先关闭字符串没有正确解析正在设置onclick

结束报价

它应如下所示：set<shared_ptr<int>> intset; auto shared1 = make_shared<int>(1); intset.insert(shared1); // if you can ensure shared1 value will not change: cout << "Does 1 exist?"<< intset.count(shared1); // if not - use count_if - the slower than std::count cout << "Does 1 exist?"<< count_if(begin(intset), end(intset), [](auto&& ptr) { return ptr && *ptr == 1; }); 但它看起来像这样：onclick="selectTime("[data='2']")"

参考错误

点击试图调用的函数onclick="selectTime([data=" 2'])'也存在范围/引用错误

以下是完整的工作示例：http://jsfiddle.net/qLnLmgy6/2/

希望有所帮助！

Answer 2

语法错误是由您传递给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>

根据数据属性选择单击的元素

2 个答案: