Question

我已经创建了一个数组（猫名称列表），并希望将该名称基本上“链接”到cat并让它显示单个img，标题和点击计数器。我正在努力找出最佳方法。现在，我只是将所有内容全部附加，以便在页面上显示所有内容。

<!DOCTYPE html>
<html>
 <head>
  <link href="css/style.css" rel="stylesheet">
 </head>

 <body>

    <div id="catselector"></div>
<div id="catinfo"></div>

<script>

    var model = {
        currentCat: null,
        catList: [
        {
            title: 'Sassy',
            caption: 'Sassy Cat',
            imgSrc: 'cat.jpg'
        },
        {
            title: 'Grumpy',
            caption: 'Grumpy Cat',
            imgSrc: 'grumpy-cat.jpg'
        },
        {
            title: 'Cuddles',
            caption: 'Cuddling Cats',
            imgSrc: 'cuddles.jpg'
        },
        {
            title: 'Sketchy',
            caption: 'Sketchy Cat',
            imgSrc: 'sketchycat.jpg'
        },
        {
            title: 'Sneezing',
            caption: 'Sneezing Cat',
            imgSrc: 'sneezingcat.jpg'
        }
    ]
};
    var root = document.querySelector('div#catselector')

    for (var i = 0; i < model.catList.length; i++) {
        root.innerHTML += "<div><ul>"+model.catList[i].title+"</ul></div>"
    }

    var kitty = document.querySelector('div#catinfo')

    for (var i = 0; i < model.catList.length; i++) {
      kitty.innerHTML += "<div><figcaption>"+model.catList[i].caption+"</figcaption><h3 data-count=0>Picture clicks: 0</h3><img src=images/"+model.catList[i].imgSrc+"></div>"
    }

    var catClicks = document.querySelectorAll('img')

    for(var i = 0; i < catClicks.length; i++) {
      catClicks[i].addEventListener('click', function() {
        var h3 = this.parentNode.querySelector('h3')
        count = parseInt(h3.dataset.count)
        newcount = count += 1

        h3.setAttribute('data-count', newcount)
        h3.innerHTML = "Picture clicks: "+ newcount
      })
    }
</script>

</body>
</html>

Answer 1

这是包含锚链接和悬停效果的完整代码。

＆＃13;

   var model = {
        currentCat: null,
        catList: [
        {
            title: 'Sassy',
            caption: 'Sassy Cat',
            imgSrc: 'cat.jpg'
        },
        {
            title: 'Grumpy',
            caption: 'Grumpy Cat',
            imgSrc: 'grumpy-cat.jpg'
        },
        {
            title: 'Cuddles',
            caption: 'Cuddling Cats',
            imgSrc: 'cuddles.jpg'
        },
        {
            title: 'Sketchy',
            caption: 'Sketchy Cat',
            imgSrc: 'sketchycat.jpg'
        },
        {
            title: 'Sneezing',
            caption: 'Sneezing Cat',
            imgSrc: 'sneezingcat.jpg'
        }
    ]
};

    var root = document.querySelector('#selectBox');
	var catInfo = document.querySelector('#catinfo');

    for (var i = 0; i < model.catList.length; i++) {		
		root.innerHTML += "<li ><a href='#' data-id="+i+">"+model.catList[i].title+"<a></li>";
		
    }

function updateCatInfo(event){
	event.preventDefault();
	model.currentCat = model.catList[this.dataset.id];
	var catData = "<div><figcaption>"+model.currentCat.caption+"</figcaption><h3 data-count=0>Picture clicks: 0</h3><img src=images/"+model.currentCat.imgSrc+"></div>";
	//adding cat data
	catInfo.innerHTML = catData;
	//getting cat image
	var catLink = document.querySelector('img');
	//adding event listener on image
	catLink.addEventListener('click', updateCounter);
}


function updateCounter() {
        var h3 = this.parentNode.querySelector('h3')
        count = parseInt(h3.dataset.count)
        newcount = count += 1

        h3.setAttribute('data-count', newcount)
        h3.innerHTML = "Picture clicks: "+ newcount

      }

var allCats = document.querySelectorAll('#selectBox li>a');

allCats.forEach(function(cat){
	cat.addEventListener('click', updateCatInfo)
})

＆＃13;

body{
	background: #ffffff;
}
li>a{
	text-decoration: none;
	color: #444;
}
li>a:hover{
	color: #F44336;
	text-decoration: underline;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Cats</title>
</head>
<body>
<ul id="selectBox" name="select">
</ul>	
 <div id="catinfo"></div>
</body>
</html>

＆＃13;

Vanilla JS列表选择/隐藏数组

1 个答案: