如何在对象中单击事件？

Question

如果我做onclick事件。我想将事件发送到我的对象中。但我发现这样做的唯一方法是使用全局函数。

function HowGoodYouKnowIt(o)
{
    var html = `

      <div class='goodContainer'>
      <span>Worst</span>
      <div data-idx='1' style='background:red' onclick='goodClicked(this)' class='goodElement good0'></div>
        <div data-idx='2' onclick='goodClicked(this)' class='goodElement good1'></div>
        <div data-idx='3' onclick='goodClicked(this)' class='goodElement good2'></div>
        <div data-idx='4' onclick='goodClicked(this)' class='goodElement good3'></div>
        <div data-idx='5' onclick='goodClicked(this)' class='goodElement good4'></div>
        <div data-idx='6' onclick='goodClicked(this)' class='goodElement good5'></div>
        <div data-idx='7' onclick='goodClicked(this)' class='goodElement good6'></div>
        <div data-idx='8' onclick='goodClicked(this)' class='goodElement good7'></div>
        <div data-idx='9' onclick='goodClicked(this)' class='goodElement good8'></div>
        <div data-idx='10' onclick='goodClicked(this)' class='goodElement good9'></div>     
        <span>Best</span>
    </div>`;

    window.goodClicked = function(elem)
    {
         var container = $(elem).parent();
         var cidx = $(elem).data('idx');
         container.find('.goodElement').each(function(idx) {
                $(this).css('background','white');

                if (idx < cidx)
                $(this).css('background','red');

         });
    }

    $(o.container).html(html);
}

var bla = new HowGoodYouKnowIt({container:'#container'});

所以我想window.goodClicked = function(elem) 是this.goodClicked = function()

但我如何才能获得onclick事件呢？

onclick='this.goodClicked()'不起作用

的jsfiddle： https://jsfiddle.net/foreyez/y37xmn9n/

Answer 1

看看这一个！它简单而干净。

＆＃13;

＆＃13;

function HowGoodYouKnowIt(o) {
  var html = `
	<span>Worst</span>
	  <div class='goodContainer'>
	  <div data-idx='1' style='background:red' onclick='goodClicked(this)' class='goodElement good0'></div>
		<div data-idx='2' class='goodElement good1'></div>
		<div data-idx='3' class='goodElement good2'></div>
		<div data-idx='4' class='goodElement good3'></div>
		<div data-idx='5' class='goodElement good4'></div>
		<div data-idx='6' class='goodElement good5'></div>
		<div data-idx='7' class='goodElement good6'></div>
		<div data-idx='8' class='goodElement good7'></div>
		<div data-idx='9' class='goodElement good8'></div>
		<div data-idx='10' class='goodElement good9'></div>		
		
	</div>
  <span>Best</span>`;

  $(o.container).html(html);
  $(o.container).find('.goodElement').on("click", function() {
    $(this).css("background", "red");
    $(this).nextAll().css("background", "white");
    $(this).prevAll().css("background", "red");
  });
  
}

var bla = new HowGoodYouKnowIt({
  container: '#container'
});

＆＃13;

.goodElement {
  display: inline-block;
  margin-right: 5px;
  width: 15px;
  height: 20px;
  border: black 1px solid;
  background: white;
  cursor: pointer;
}

.goodContainer {
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用jQuery而不是全局函数定义onclick事件：

function HowGoodYouKnowIt(o)
{
	var html = `
	
	  <div class='goodContainer'>
	  <span>Worst</span>
	  <div data-idx='1' style='background:red' onclick='goodClicked(this)' class='goodElement good0'></div>
		<div data-idx='2' class='goodElement good1'></div>
		<div data-idx='3' class='goodElement good2'></div>
		<div data-idx='4' class='goodElement good3'></div>
		<div data-idx='5' class='goodElement good4'></div>
		<div data-idx='6' class='goodElement good5'></div>
		<div data-idx='7' class='goodElement good6'></div>
		<div data-idx='8' class='goodElement good7'></div>
		<div data-idx='9' class='goodElement good8'></div>
		<div data-idx='10' class='goodElement good9'></div>		
		<span>Best</span>
	</div>`;
	
	// how do I make this function this.goodClicked instead of window.goodClicked and get the click event to call it
	

	$(o.container).html(html);
  $('.goodContainer [data-idx]').click(function(){
  	var $this = $(this),
    		container = $this.parent();
		 var cidx = $this.data('idx');
		 container.find('.goodElement').each(function(idx) {
		 		$(this).css('background','white');
				if (idx < cidx)
				$(this).css('background','red');
			
		 });
  
  })
}

var bla = new HowGoodYouKnowIt({container:'#container'});

.goodElement {
	display:inline-block;
	margin-right:5px;
	width:15px;
	height:20px;
	border:black 1px solid;
	background:white;
	cursor:pointer;
	
}

.goodContainer {
	white-space:nowrap;
}

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

</div>