Javascript 如何单击对象中的事件？

如果我做一个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'});

函数HowGoodYouKnowIt（o）
{
变量html=`
最差的
最好的
`;
window.goodClicked=函数（elem）
{
var container=$（elem.parent（）；
var cidx=$（elem）.data（'idx'）；
container.find（'.goodElement'）。每个（函数（idx）{
$（this.css（'background'，'white'）；
if（idx

所以我想要

window.goodClicked=function（elem）

要成为

this.goodClicked=function（）

但是我怎样才能让onclick活动去那里呢

onclick='this.goodClicked（）'

不起作用

jsfiddle：

---

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

函数HowGoodYouKnowIt（o）
{
变量html=`
最差的
最好的
`;
//如何将此函数设为this.goodClicked而不是window.goodClicked，并获取click事件来调用它
$（o.container）.html（html）；
$（'.goodContainer[data idx]'）。单击（函数（）{
变量$this=$（this），
container=$this.parent（）；
var cidx=$this.data（'idx'）；
container.find（'.goodElement'）。每个（函数（idx）{
$（this.css（'background'，'white'）；
if（idx
.goodElement{
显示：内联块；
右边距：5px；
宽度：15px；
高度：20px；
边框：黑色1px实心；
背景：白色；
光标：指针；
}
.goodContainer{
空白：nowrap；
}
看看这个！它既简单又干净


函数HowGoodYouKnowIt（o）{
变量html=`
最差的
最佳`；
$（o.container）.html（html）；
$（o.container）.查找（'.goodElement'）。在（“单击”，函数（）上）{
$（this.css（“背景”、“红色”）；
$（this.nextAll（）.css（“背景”、“白色”）；
$（this.prevAll（）.css（“背景”、“红色”）；
});
}
var bla=新的您知道多少({
容器：“#容器”
});
.goodElement{
显示：内联块；
右边距：5px；
宽度：15px；
高度：20px；
边框：黑色1px实心；
背景：白色；
光标：指针；
}
.goodContainer{
空白：nowrap；
}

你不能那样做<代码>html
只是一个字符串。您必须使用另一种方法创建元素，例如
document.createElement
，然后使用
element.onclick=
设置onclick事件。由于这并没有明确回答您的JavaScript问题，因此我将把它作为注释发布在这里。如果你把它变成一个单选按钮组，你可以用HTML/CSS单独获得相同的用户界面，也可以通过键盘与之交互。是的，但我想看到更多的答案/方法。谢谢。better to do$（o.container）。查找（'.goodElement'）。在（“单击”）。。。。。因为页面上可能有很多Youknowit对象。但是要注意的是，跨距应该在容器内，以使它们与框内联，但没有什么大不了的