在JavaScript中单击时在图像周围创建边框？

时间：2017-11-16 19:55:54

标签： javascript html css

我正在为学校做作业，并且一直试图让代码按原样运行。在这一点上，我需要的是让Onclick工作。我尝试在单击的每个缩略图图像周围放置一个边框，然后在单击另一个图像后删除边框。我已经查看过多个资源，但似乎根本无法使用它。如果有人能提供帮助，我们将非常感激。我对JavaScript非常陌生，并且很遗憾我已经获得了资源。我的解决方案需要纯粹是在没有任何JQuery的JavaScript中。

// JavaScript Document //
var imgArray = new Array(
  //list of slides
  'chestnutp.jpg',
  'chestnuts.jpg',
  'elephant.jpg',
  'fall.jpg',
  'leaves.jpg'
);
var imgPath = "img/";

function swapImage(imgID) { //pulls image to larger area..
  var theImage = document.getElementById('largeImage');
  var newImg;
  newImg = imgArray[imgID];
  theImage.src = imgPath + newImg;
  var element = document.getElementById("id20");
  element.innerHTML = "New Fall Photo Gallery"; //Additional change to DOM; changes original name
}
var captionArray = [
  //list of captions
  'A chestnut coming out of a plant on a fall day.',
  'A bundle of chestnuts on the ground on a fall day.',
  'An Elephant walking on an African Fall evening.',
  'A fall display with flowers and pumpkins.',
  'Looking up at the leaves on a fall day.'
];

function swapCaption(ID) { //creates caption when larger image is shown
  var theCaption = document.getElementById('caption');
  var newCaption;
  newCaption = captionArray[ID];
  theCaption.innerHTML = newCaption;
}

function mark(ID) { //creates border
  document.getElementById(ID).style.border = "2px solid orange";
}
@charset "utf-8";

/* CSS Document */

body {
  background-color: #322F2F;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

[class*="col-"] {
  float: left;
}

.row:after {
  content: "";
  clear: both;
  display: block;
}

#wrapper {
  height: auto;
  width: 60%;
  margin: auto;
}

h1 {
  font-size: 1.6em;
  color: #fff;
  text-align: center;
}

#thumbnails {
  height: 20%;
  width: 100%;
}

#thumbnails>img:hover {
  border: 1px #9D9C9C solid;
}

.thumbDown {
  border: none;
}

.thumbUp {
  border: 1px #9D9C9C solid;
}

.largeImage {
  height: 100%;
  width: 100%;
}

.caption {
  font-size: .9em;
  height: 25px;
  width: 100%;
  color: #fff;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fall Air Photo Gallery</title>
  <!--Change title-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="js/image-gallery.js"></script>
</head>

<body>
  <div id="wrapper">
    <div class="row">
      <div class="col-12">
        <h1 id="id20">Fall Air Photo Gallery</h1>
        <!--Change Header-->
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div id="thumbnails">
          <img src="img/chestnutp.jpg" id="chestnutp" onclick="mark(1)" width="19.375%" height="19.5%" alt="Chestnut in Plant" onmouseover="swapImage(0); swapCaption(0)" />
          <!--onmouseover will switch images on hover-->
          <!--Onclick used to put border behind clicked imaged-->
          <img src="img/chestnuts.jpg" id="chestnuts" onclick="mark(2)" width="19.375%" height="19.5%" alt="Chestnuts on the Ground" onmouseover="swapImage(1); swapCaption(1)" />
          <img src="img/elephant.jpg" id="elephant" onclick="mark(3)" width="19.375%" height="19.5%" alt="Elephant walking the African fall sunset" onmouseover="swapImage(2); swapCaption(2)" />
          <img src="img/fall.jpg" id="fall" onclick="mark(4)" width="19.375%" height="19.5%" alt="Fall display on a fall day" onmouseover="swapImage(3); swapCaption(3)" />
          <img src="img/leaves.jpg" id="leaves" onclick="mark(5)" width="19.375%" height="19.5%" alt="Leaves on a Fall Day" onmouseover="swapImage(4); swapCaption(4)" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div id="mainImage">
          <img id="largeImage" src="" width="100%" height="100%" alt="" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="caption">
          <p id="caption"></p>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

5 个答案:

答案 0 :(得分：1)

一个问题是您的mark()函数正在传递硬编码的数字，但没有任何元素将id属性设置为数字。请注意，您的<img> id属性是字符串。

您可以为这些人做的是设置每个标记调用以传递元素ID，如下所示：

onclick="mark(this.id)"

通过稍微改动，您将看到您的边框变为橙色。但是，仍然存在清除其他边界的问题......

要清除边框，您可以循环父元素的子元素以删除所有边框，然后再设置单击的边框。您可以在mark函数或其他一些函数/处理中执行此操作，但我会更改此示例的mark函数：

function mark(ID) { //creates border
    var childImages = document.getElementById("thumbnails").children;
    var i;

    // clear any other borders that might be set
    for ( i = 0; i < childImages.length; i++ ) {
       childImages[i].style.border = '';
    }

    // Then set the one that got clicked.
    document.getElementById(ID).style.border="2px solid orange";
}

答案 1 :(得分：0)

$(document).ready(function() {  
$(document).on("click","#thumbnails img",function(){
	$(this).css("border","5px solid orange");
	$("#thumbnails img").not($(this)).css("border","none");
});
});
#thumbnails > img{
	border-radius:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbnails">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMZPrNzLxySwT9GuHbz33ZyNXFJtBrqg_ruleaepzXq2zf3NOewA"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMZPrNzLxySwT9GuHbz33ZyNXFJtBrqg_ruleaepzXq2zf3NOewA"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMZPrNzLxySwT9GuHbz33ZyNXFJtBrqg_ruleaepzXq2zf3NOewA"/>
</div>

答案 2 :(得分：0)

为您的所有图片添加类名称，例如class =＆＃34; img＆＃34;然后使用getElementsByClassName（）将它们推入一个数组。还记得开始你的标记（i）我在填写onclicks时从0开始值。

<script>
var array = document.getElementsByClassName("img"); //pushes all your img 
function mark(i,j)                                  //divs into an array
{
    array[i].style.border = "2px solid orange"; //makes the border on click
    for(j = 0; j < array.length ; j++) //this for loop will remove the 
     {                                // border of every other img div
        if(j != i)
        {
            array[j].style.border="none";
        }
    }
}
</script>

答案 3 :(得分：0)

您的onclick触发器未选择任何现有ID。而是搜索一个元素，并将您输入的数字作为id。

您当前的onclick事件： 

onclick="mark(1)"

正在搜索id等于1的元素（例如：id =＆＃34; 1＆＃34;）

它应该使用＆＃34;这个＆＃34;触发mark（）函数。告诉javascript在当前元素上运行该函数。

您的onclick事件应更改为： 

onclick="mark(this)"

并将mark（）函数更新为： 

function mark(currentEl) {
    // Retreives the id of current element that is clicked
    var id = currentEl.id;

    // Apply the border 
    document.getElementById(id).style.border="2px solid orange";
}

应用此更改后，将出现一个边框，但是，一旦点击另一个图像，它就不会消失。我假设您希望边框出现在当前图像上，仅点击以突出显示活动图像并从之前删除。

仅突出显示活动图像的备用功能： 我在这里使用条件是为了更容易理解。如果您熟悉for循环，@ Paul T＆C的方法是一个很好的选择。

// set an empty variable to compare later
var previousEl;

function mark(currentEl) {

    // Retrieves the id of current element that is clicked
    var id = currentEl.id;

    /**
    * Checks to see if a previous element has been clicked
    * if it was, it will remove the border from the previous and apply it to the current element
    */
    if(previousEl){
        previousEl.style.border = "unset"; // css unset border
        currentEl.style.border = "2px solid orange"; // apply border to current element
        previousEl = document.getElementById(id); // assign current element id to previousEl variable 
    } else {
        currentEl.style.border = "2px solid orange";
        previousEl = document.getElementById(id);
    }
}

以下是使用备用功能的工作代码段。

＆＃13;
＆＃13; 
// JavaScript Document
var imgArray = new Array(
    //list of slides
    '/400/200/abstract',
    '/400/200/abstract',
    '/400/200/abstract',
    '/400/200/abstract',
    '/400/200/abstract'
);
var imgPath = "http://lorempixel.com";

function swapImage(imgID) { //pulls image to larger area..
    var theImage = document.getElementById('largeImage');
    var newImg;
    newImg = imgArray[imgID];
    theImage.src = imgPath + newImg;
    var element = document.getElementById("id20");
    element.innerHTML = "New Fall Photo Gallery"; //Additional change to DOM; changes original name
}
var captionArray = [
    //list of captions
    'A chestnut coming out of a plant on a fall day.',
    'A bundle of chestnuts on the ground on a fall day.',
    'An Elephant walking on an African Fall evening.',
    'A fall display with flowers and pumpkins.',
    'Looking up at the leaves on a fall day.'
];

function swapCaption(ID) { //creates caption when larger image is shown
    var theCaption = document.getElementById('caption');
    var newCaption;
    newCaption = captionArray[ID];
    theCaption.innerHTML = newCaption;
}

// set an empty variable to compare later
var previousEl;

function mark(currentEl) {
    
    // Retreives the id of current element that is clicked
    var id = currentEl.id;
    
    /**
    * Checks to see if a previous element has been clicked
    * if it was, it will remove the border from the previous and apply it to the current element
    */
    if(previousEl){
        previousEl.style.border = "unset"; // css unset border
        currentEl.style.border = "2px solid orange"; // apply border to current element
        previousEl = document.getElementById(id); // assign current element id to previousEl variable
    } else {
        currentEl.style.border = "2px solid orange"; // 
        previousEl = document.getElementById(id);
    }
}
＆＃13; 
/* CSS Document */

body {
    background-color: #322F2F;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

[class*="col-"] {
    float: left;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

#wrapper {
    height: auto;
    width: 60%;
    margin: auto;
}

h1 {
    font-size: 1.6em;
    color: #fff;
    text-align: center;
}

#thumbnails {
    height: 20%;
    width: 100%;
}

#thumbnails>img:hover {
    border: 1px #9D9C9C solid;
}

.thumbDown {
    border: none;
}

.thumbUp {
    border: 1px #9D9C9C solid;
}

.largeImage {
    height: 100%;
    width: 100%;
}

.caption {
    font-size: .9em;
    height: 25px;
    width: 100%;
    color: #fff;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Fall Air Photo Gallery</title>
    <!--Change title-->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/image-gallery.js"></script>

</head>

<body>
    <div id="wrapper">
        <div class="row">
            <div class="col-12">
                <h1 id="id20">Fall Air Photo Gallery</h1>
                <!--Change Header-->
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div id="thumbnails">
                    <img src="http://lorempixel.com/400/200/abstract" id="chestnutp" onclick="mark(this)" width="19.375%" height="19.5%" alt="Chestnut in Plant" onmouseover="swapImage(0); swapCaption(0)" />
                    <!--onmouseover will switch images on hover-->
                    <!--Onclick used to put border behind clicked imaged-->
                    <img src="http://lorempixel.com/400/200/abstract" id="chestnuts" onclick="mark(this)" width="19.375%" height="19.5%" alt="Chestnuts on the Ground" onmouseover="swapImage(1); swapCaption(1)" />
                    <img src="http://lorempixel.com/400/200/abstract" id="elephant" onclick="mark(this)" width="19.375%" height="19.5%" alt="Elephant walking the African fall sunset" onmouseover="swapImage(2); swapCaption(2)" />
                    <img src="http://lorempixel.com/400/200/abstract" id="fall" onclick="mark(this)" width="19.375%" height="19.5%" alt="Fall display on a fall day" onmouseover="swapImage(3); swapCaption(3)" />
                    <img src="http://lorempixel.com/400/200/abstract" id="leaves" onclick="mark(this)" width="19.375%" height="19.5%" alt="Leaves on a Fall Day" onmouseover="swapImage(4); swapCaption(4)" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div id="mainImage">
                    <img id="largeImage" src="" width="100%" height="100%" alt="" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="caption">
                    <p id="caption"></p>

                </div>
            </div>
        </div>
    </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

＆＃13;
＆＃13; 
function addBorder(id) {
  var x = document.getElementsByClassName("img");
  for(i = 0; i < x.length; i++)
  {
	  x.item(i).style.border = 'none';
  }
  id.style.border = '5px solid orange';
}
＆＃13; 
<img class="img" onclick="addBorder(this)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMZPrNzLxySwT9GuHbz33ZyNXFJtBrqg_ruleaepzXq2zf3NOewA"/>
<img class="img" onclick="addBorder(this)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMZPrNzLxySwT9GuHbz33ZyNXFJtBrqg_ruleaepzXq2zf3NOewA"/>
<img class="img" onclick="addBorder(this)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMZPrNzLxySwT9GuHbz33ZyNXFJtBrqg_ruleaepzXq2zf3NOewA"/>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题