Question

我使用谷歌脚本生成每个包含图片和名称的数据。我可以为一个项目做弹出窗口。

如何使用生成的项目进行操作？

这是我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">

<head>
 <link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa:400,700|Cairo&amp;subset=arabic" rel="stylesheet">
<meta content="ar-bh" http-equiv="Content-Language" />
<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
td {border: 1px solid #ccc;}</style>

<style type="text/css">
        body {
   font-family: 'Aref Ruqaa', serif;
   }
            #largeImgPanel {
                text-align: center;
                display: none;
                position: fixed;
                z-index: 100;
                top: 0; left: 0; width: 100%; height: 100%;
                background-color: rgba(100,100,100, 0.5);
            }
        </style>       

<style> 
#table_id  {display: block; }
#table_id  td {display: inline-block; }

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 0px; 
    width: 150px;
    height: 25x; 
} 
</style>

<style>
div.polaroid2 {
  width: 200px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.polaroid {
 width: 200px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 1px;
}
</style>

<style>
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
</style>


</head>

<body>

 
 <table id="table_id" align="center" cellpadding="10" >
	<tr>
    <? var data = getData1(); ?>
<? for (var i = 2; i <= 1+data[0][3] ; i++) { ?>
		<td style="border-width: 0"><div class="polaroid">
  <img height="160" src=<?= data[i][8] ?>  width="127" style="text-align: center" >
  <div id='a<?= i ?>' class="popup" onclick="myFunction()" class="container">
    <?= data[i][3] ?> <br> <?= data[i][4] ?> <span class="popuptext" id='myPopup<?= i ?>'><?= data[i][3] ?> ميااااااو</span>
  </div>
</div></td>

<script>
// When the user clicks on div, open the popup
function myFunction() {
    var popup = document.getElementById('myPopup');
    popup.classList.toggle('show');
}
</script>

<? } ?>



	</tr>
</table>
 

 
<meta content="Sheets" name="generator" />
<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}
.auto-style1 {
	border-collapse: collapse;
	border: 2px solid #000000;
}
.auto-style2 {
	direction: rtl;
}
.auto-style3 {
	border-width: 0;
}
.auto-style4 {
	font-size: midium;
}
.auto-style5 {
	direction: rtl;
	font-size: midium;
}
.auto-style6 {
	font-size: midium;
}
--></style>


</body>
<p>
<img border="0" src="https://drive.google.com/uc?export=download&id=0B33gublUUxAtYkRPUjFVUGExNm8" width="90" height="12" align="left"></p>
 


</html>

这就是我得到的

https://script.google.com/macros/s/AKfycbxxV4G7YN7Pg3C-aZIniNPExNI7jQhMn7-O92RA60dtDmX17Ko/exec?page=2

Answer 1

如下所示分发您的toggle事件：

function myFunction(element) {
     element.childNodes[3].classList.toggle('show');
}

将您的onclick更新为myFunction(this)。

有很多方法可以做到这一点，但是如果假设它是静态的那么我将如何做span元素位置。

动态生成数据的弹出窗口

1 个答案: