Question

我需要学校项目的帮助。我有一个catClicker应用程序，显示猫的图像和图像被点击的次数。

现在我必须显示五只不同猫的名字。当点击猫的名字时，我必须更新该猫的图像和计数器。

这是我到目前为止所做的：

https://github.com/silvodesigns/catClicker

Answer 1

像这样改变你的猫对象

var cats = {'Tabby' : {'count' : 0, 'src' : 'img/Cat01.jpg'}, 'Tiger' : {'count' : 0, 'src' : 'img/Cat02.jpg'}};

说明：我们将猫名称作为单个cat属性的关键，因此我们可以在点击时使用cat名称来获取它们。

对于您的事件处理程序

   $("ul#cats>li").on("click", function(){
     var name = $(this).html();
     var src = cats[name].src;
     $('img.cat').attr('src',src);
     cats[name].count = cats[name].count + 1;
    });

说明：

正在使用Jquery，因为我可以看到你正在使用jquery.js。

我们使用html属性获取名称。
然后我们将它作为cat对象的密钥传递，以获取名称和计数等属性。

注意：我只添加了两只猫，如果你有它们，可以添加更多：D

Answer 2

在图像容器上注册一个单击事件处理程序（使用事件委托）。

每次点击都会增加计数器，这样就可以保持点击次数。

点击名称，执行相同操作。注册一个单击事件处理程序，然后单击从event.target获取图像名称，然后根据它更改主图像。

Answer 3

有很多解决方案可以做同样的事情。这是我方面的解决方案。您之前添加名称的代码是：

for(var i=0; i< catNames.length; i++){
 $('#cats').append('<li>'+ catNames[i].name +'</li>');// loop over the names of the cats and create and append it to the ul on Index.html
 }

我做了一点改变。使用数据属性存储每个名称的索引（li）

for(var i=0; i< catNames.length; i++){
 $('#cats').append('<li data-index="'+i+'" class="names">'+ catNames[i].name +'</li>');// loop over the names of the cats and create and append it to the ul on Index.html
 }

并且你的onclick目标与之前不同：

$('.cat').click(function(){// whenever the picture with class .cat is clicked the counter goes up
catNames[model.currentCat].clickCount ++;
var counter = document.getElementById("counter");
counter.innerHTML = catNames[model.currentCat].clickCount;

}

click事件的更新版本如下： **我使用名称作为每个li的类

$('.names').click(function(){
// whenever the picture with class .cat is clicked the counter goes up

var index=parseInt($(this).data("index"));
var image=catNames[index].imgSrc;



//This line count individual click for each
    catNames[index].clickCount=    catNames[index].clickCount+1


    catNames[model.currentCat].clickCount ++;
    var counter = document.getElementById("counter");
    counter.innerHTML = catNames[model.currentCat].clickCount;
    $('.cat').attr('src',image);
    }

Answer 4

您遇到的问题是，当单击HTML列表项时，单击处理程序必须确定应更新哪个逻辑cat对象。

这是一个简单的解决方案：当你创建列表项时，添加一个引用cat对象的属性。

像这样：

var listItem = $('<li>').html(cat.name);
$('#catList').append(listItem);
listItem = listItem[0];  // Extract the DOM element from the jQuery object.
listItem.cat = cat;      // Add a reference to the logical cat object.
listItem.onclick = function () {
  var cat = this.cat;    // When the list item is clicked, get the cat object.
  cat.clickCount++;      // Increment the counter and update the display.
  $('#displayClickedCat').html(
      '<p id="counter">' + cat.name + ' has ' + cat.clickCount +
      ' click' + (cat.clickCount == 1 ? '' : 's') +
      '.</p>' + '<img src="' + cat.src + '" class="cat" />');
};

下面的代码段演示了这种方法。

＆＃13;

var imageDirectory =
    'https://raw.githubusercontent.com/silvodesigns/catClicker/master/img/';
var model = {
  startCat: 0,
  cats: [
    { name: 'Tabby', src: imageDirectory + 'Cat01.jpg' },
    { name: 'Scaredy', src: imageDirectory + 'Cat02.jpg' },
    { name: 'Sleepy', src: imageDirectory + 'Cat03.jpg' },
    { name: 'Shadow', src: imageDirectory + 'Cat04.jpg' },
    { name: 'Tiger', src: imageDirectory + 'Cat05.jpg' }
  ]
};
$(document).ready(function () {
  var cats = model.cats;
  for (var i = 0; i < cats.length; i++) {
    var cat = cats[i];
    cat.clickCount = 0;
    var listItem = $('<li>').html(cat.name);
    $('#catList').append(listItem);
    listItem = listItem[0];  // Extract the DOM element from the jQuery object.
    listItem.cat = cat;      // Add a reference to the logical cat object.
    listItem.onclick = function () {
      var cat = this.cat;    // When the list item is clicked, get the cat object.
      cat.clickCount++;      // Increment the counter and update the display.
      $('#displayClickedCat').html(
          '<p id="counter">' + cat.name + ' has ' + cat.clickCount +
          ' click' + (cat.clickCount == 1 ? '' : 's') +
          '.</p>' + '<img src="' + cat.src + '" class="cat" />');
    };
    if (i == model.startCat) {
      cat.clickCount = -1;
      listItem.onclick();
    }
  }
});

＆＃13;

body {
  font-family: sans-serif;
  padding-left: 10px;
  font-size: 18px;
}
img {
}
#catList {
  list-style: none;
  padding: 0;
}
#catList li {
  display: inline;
  margin: 5px 10px 5px 0;
  padding: 5px 12px;
  border: 1px solid #bbb;
  border-radius: 5px;
  cursor: pointer;
}
#catList li:hover {
  border-color: #888;
  background: #f4f4f4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="displayNames">
  <ul id="catList"></ul>
</div>

<div id="displayClickedCat"></div>

＆＃13;

如何显示与单击的列表项关联的图像

4 个答案: