Что принятый путь состоит в том, чтобы отправить 64-разрядным значениям по JSON?
Думаю, проблема в том, что когда вы добавляете свой обработчик событий в .imgs
.imgs выбирается с помощью querySelector, а не querySelectorAll, что означает, что он получает только первый.
Вам, вероятно, просто нужно изменить селектор для imgs на querySelectorAll, а затем выполнить итерацию по каждому из них, чтобы подключить прослушиватель событий
//JS CODE
const current = document.querySelector("#current");
//const imgs = document.querySelector(".imgs");
const imgs = document.querySelectorAll(".imgs");
const img = document.querySelectorAll(".imgs img");
const opacity = 0.7;
// Set first img opacity
img[0].style.opacity = opacity;
//imgs.addEventListener("click", imgClick);
imgs.forEach( function(i) {
i.addEventListener("click", imgClick);
});
function imgClick(e) {
// Reset the opacity
img.forEach(img => (img.style.opacity = 1));
// Change current image to src of clicked image
current.src = e.target.src;
// Add fade in class
current.classList.add("fade-in");
// Remove fade-in class after .5 seconds
setTimeout(() => current.classList.remove("fade-in"), 500);
// Change the opacity to opacity var
e.target.style.opacity = opacity;
}<section id="portfolioProjects" class="section section-a">
<div class="container">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<h2 style="color: #585555db">
Portfolio
</h2>
<p class="psub-title-One">
some text
</p>
</div>
</div>
<ul class="nav nav-tabs animate-box">
<li class="active">
<a data-toggle="tab" href="#home">Simple WebSite</a>
</li>
<li><a data-toggle="tab" href="#menu1">Design</a></li>
<li><a data-toggle="tab" href="#menu2">Code Snippets</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<br />
<div class="animate-box">
<h2>Fully Functional Responsive Website</h2>
<p class="about-text">
some text
</p>
</div>
<iframe
src="https://codepen.io/dasilvabrunotexas/"
scrolling="auto"
height="900"
width="100%"
class="animate-box"
></iframe>
<!-- Hide Image Gallery on Big Screens-->
<!-- Hide Image Gallery on Big Screens-->
<div class="container-gallery animate-box ">
<div class="main-img">
<img src="https://www.placecage.com/200/300" alt="Image1" id="current" />
</div>
<div class="imgs">
<div class="img-One animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-two animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-three animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-four animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-five animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-six animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-seven animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-eigth animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
</div>
</div>
<!-- END Hide Image Gallery on Big Screens-->
</div>
<!-- END First Portfolio Menu-->
<div id="menu1" class="tab-pane fade">
<br />
<h2>Graphic & Web Design Projects</h2>
<p class="about-text">
some text
</p>
<!-- Hide Image Gallery on Big Screens-->
<!-- Hide Image Gallery on Big Screens-->
<div class="container-gallery animate-box ">
<div class="main-img">
<img src="https://www.placecage.com/200/300" alt="Image1" id="current" />
</div>
<div class="imgs">
<div class="img-One animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-two animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-three animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-four animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-five animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-six animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-seven animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-eigth animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
</div>
</div>
<!-- END Hide Image Gallery on Big Screens-->
</div>
<!-- END First Menu-->
<div id="menu2" class="tab-pane fade">
<br />
<div class="animate-box">
<h2>Tic-Tac-Toe Game</h2>
<p class="about-text">
SOME TEXT
<a target="_blank" href="#"
><i style="color:#ffcc5c" class="fab fa-fly"></i>
</a>
to see more Projects on CodePen.
</p>
</div>
<iframe
src="#"
height="900"
width="95%"
class="animate-box"
></iframe>
<!-- Hide Image Gallery on Big Screens-->
<div class="container-gallery animate-box ">
<div class="main-img">
<img src="https://www.placecage.com/200/300" alt="Image1" id="current" />
</div>
<div class="imgs">
<div class="img-One animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-two animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-three animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-four animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-five animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-six animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-seven animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
<div
class="img-eigth animate-box "
data-animate-effect="fadeIn"
>
<img src="https://www.placecage.com/200/300" />
</div>
</div>
</div>
<!-- END Hide Image Gallery on Big Screens-->
</div>
</div>
</div>
<script src="../dist/js/image-gallery.js"></script>
</section>
<br />4 ответа
Это, кажется, меньше проблема с JSON и больше проблема с самим JavaScript. Что Вы планируете сделать с этими числами? Если это - просто волшебный маркер, который необходимо пасовать назад к веб-сайту позже, любой ценой просто использовать строку, содержащую значение. Если на самом деле необходимо сделать арифметику на значении, Вы могли бы возможно записать свои собственные стандартные программы JavaScript для 64-разрядной арифметики.
Один способ, которым Вы могли представить значения в JavaScript (и следовательно JSON) будет путем разделения чисел на два 32-разрядных значения, например,
[ 12345678, 12345678 ]
, Чтобы разделить 64-разрядное значение на два 32-разрядных значения, сделать что-то вроде этого:
output_values[0] = (input_value >> 32) & 0xffffffff;
output_values[1] = input_value & 0xffffffff;
Затем, чтобы повторно объединить два 32-разрядных значения к 64-разрядному значению:
input_value = ((int64_t) output_values[0]) << 32) | output_values[1];
Представление числа JS является стандартным IEEE дважды, таким образом, Вы не можете представить целое число на 64 бита. iirc Вы получаете, возможно, 48 битов фактической международной точности в двойном, но все JS bitops уменьшают до точности на 32 бита (это - то, чего требует спецификация. yay!) поэтому при реальной необходимости в интервале на 64 бита в js необходимо будет реализовать собственную международную логическую библиотеку на 64 бита.
Сам JSON не заботится о допустимых ограничениях реализации. Ваша проблема состоит в том, что JS не может обработать Ваши данные, не протокол. Другими словами, Ваш клиентский код JS должен использовать любую из тех неидеальных опций.
Тип Javascript Number (64-битный IEEE 754) имеет точность около 53 бит.
Но, если вам не нужно выполнять какое-либо сложение или умножение, вы можете оставить 64 -битовое значение как 4-символьные строки, поскольку JavaScript использует UTF-16.
Например, 1 может быть закодировано как «\ u0000 \ u0000 \ u0000 \ u0001». Это имеет то преимущество, что сравнение значений (==,>, <) работает со строками, как ожидалось. Также кажется простым записывать битовые операции:
function and64(a,b) {
var r = "";
for (var i = 0; i < 4; i++)
r += String.fromCharCode(a.charCodeAt(i) & b.charCodeAt(i));
return r;
}