Javascript Javascipt增加URL中找到的第一个数字，而不是图像id

简而言之，下面的代码将增加url中的图像编号，以便导航到下一个图像：

https://bwrtsa.co.za/photos/test-gallery/#image1

到

问题是，当我在url中有一个“更早”的数字时，该数字会增加，而不是图像编号：

https://bwrtsa.co.za/photos/test-gallery-1/#image1

到

更详细的信息：

我有以下代码为我的图库自定义帖子类型创建一个lightbox。 为了让lightbox导航正常工作，我需要计算lightbox上的图像总数。一切正常，单击“下一步”时，图像1变为图像2。 问题是，只要帖子的slug中有一个数字，那么这个数字就会增加，而不是图像数字

以下链接将演示该问题（单击图像打开lightbox并导航到下一个图像）

文章标题中有一个数字：

职位名称中没有数字：

而不是使用
location.href=location.href.replace（regExDigit，newLink）替换整个URL中的数字
，您只想在URL的哈希部分（即
#
后面的部分）替换它

我们可以做的是在替换数字后生成新的URL，而不是替换当前URL中的数字。这确保我们只更改图像编号。新的
imageLink
函数如下所示（我还删除了全局变量以使代码更加清晰）：

它的作用：

我们添加了一个新参数
changeBy
，告诉函数更改图像的方式，例如，下一个参数为+1，上一个参数为-1
根据
#
将URL拆分为多个部分-这将为我们提供主URL以及图像的哈希

使用正则表达式从图像哈希中提取数字
根据我们想要的是下一张（+1）图像还是上一张（-1）图像来计算新的数字
重建完整的图像URL并将其返回给处理程序
我们还可以整理代码以计算新的图像编号-我们传入当前图像编号和changeBy参数，它返回新编号：

/* 
currentNum: the current image number
changeBy: what to change the number by, e.g. 1 for next, -1 for previous 
*/
function getNewNum(currentNum, changeBy) {
  newNum = Number(currentNum) + changeBy;  // adjust the current number
  
  // Make sure it is within the bounds of the number of images
  if (newNum > imageCount)  newNum = 1;
  else if (newNum < 1)      newNum = imageCount;

  return newNum;
}

工作示例：您可以在下面看到这段代码正在工作，只需对显示的url字符串进行一些小调整，即可使用该字符串而不是页面url（此处显然不起作用）：


让imageCount=5；
//仅用于演示的显示元素
让next=document.getElementById（'next-lightbox'）；
让prev=document.getElementById（'prev-lightbox'）；
让imageDisplay=document.getElementById（'imageDisplay'）；
/* 
获取当前图像url，替换哈希（#imageN）中的数字并返回新的
统一资源定位地址
注意新参数：changeBy=更改图像编号的内容：1表示下一个，1表示上一个
*/
功能imageLink（changeBy）{
设regExDigit=/\d+/；
var currentNum=0；
var currentURL=imageDisplay.innerHTML；//仅用于演示-使用location.href
//让currentURL=location.href；
//拆分URL以获取主URL和图像哈希
var parts=currentURL.split（“#”）；
var url_gallery_part=parts[0]；
var-imagehash=零件[parts.length-1]；
//如果url中有散列，则提取数字
if（imagehash）currentNum=regExDigit.exec（imagehash）[0]；
//调用计算上一个/下一个数字的函数
//输入当前图像编号并更改（例如+1或-1）
newNum=getNewNum（currentNum，changeBy）；
//重建我们的完整图像url，将编号替换为enw编号
newImageLink=url_gallery_part+“#”+imagehash.replace（regExDigit，newNum）；
返回newImageLink；
}
/* 
currentNum：当前图像编号
更改人：更改数字的方式，例如，1表示下一个，1表示上一个
*/
函数getNewNum（currentNum，changeBy）{
newNum=Number（currentNum）+changeBy；//调整当前编号
//确保它在图像数量的范围内
如果（newNum>imageCount）newNum=1；
如果（newNum<1）newNum=imageCount，则为else；
返回newNum；
}
next.addEventListener（'click'，evt=>{
evt.preventDefault（）；
//通过向当前图像添加1来获取下一个图像的完整URL
imageDisplay.innerHTML=imageLink（1）；//用于演示。替换为以下内容
//location.href=imageLink（1）；
});
上一个addEventListener（'click'，evt=>{
evt.preventDefault（）；
//通过从当前图像中减去1来获取上一个图像的完整URL
imageDisplay.innerHTML=imageLink（-1）；//用于演示。替换为以下内容
//location.href=imageLink（-1）；
});
下一步
上
https://www.example.com/photos/test-gallery-1/#image1
比起你，尽管你在回答问题上付出了那么多的努力，它还是很有魅力！非常感谢！
https://bwrtsa.co.za/photos/test-gallery-2/#image1

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="entry-content">
      <div class="photos-header">
        <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
        <?php the_excerpt(); ?>
        <span class="photos-header-notice">
          Click on any image to enlarge and see the caption.
        </span>
      </div>
     
 
 <?php
$images = get_field('gallery_images');
$itotal = count($images);
$i = 0;

if( $images ): ?>

<div class="wrapper">
  <div class="grid-gallery">
    <?php foreach( $images as $image ): ?> 
    <?php $i++ ?>  

      <div class="box boxbg">
        <a href="#image<?php echo $i; ?>" class="ioverlay">
          <img src="<?php echo esc_url($image['sizes']['galleryThumb']); ?>" alt="Thumbnail of <?php echo esc_url($image['alt']); ?>" />
          <div class="text">
            <span>View</span>
          </div>
        </a>
      </div> <!-- BOX END -->

      <?php endforeach; ?> 
    </div> <!-- END GRID -->
    

<?php
$slug = $post->post_name; 
$images = get_field('gallery_images');
$itotal = count($images); 
$i = 0; 

foreach( $images as $image ): 
$i++;
?>


  <div class="lightbox short-animate" id="image<?php echo $i; ?>">
    <img src="<?php echo esc_url($image['sizes']['galleryLarge']); ?>" alt="Image <?php echo esc_url($image['alt']); ?>" class="long-animate" />
  </div>

<?php endforeach; ?> 

<?php
global $post;
?>


<div class="short-animate" id="close-wrapper">
  <!-- <a href="/#Gallery" id="close-lightbox" class="long-animate"></a> -->
    <a href="/<?php echo $slug ?>" id="close-lightbox" class="long-animate"></a>
</div>
    
<div class="short-animate" id="next-wrapper">
  <a href="#" id="next-lightbox" class="long-animate"></a>
</div>
    
<div class="short-animate" id="prev-wrapper">
  <a href="#" id="prev-lightbox" class="long-animate"></a>
</div>


  
</div>
<?php endif; ?>


</div> <!-- CONTAINER -->
</div> <!-- MODULE -->
<?php // endif; ?>

<script type="text/javascript">
'use strict';

let link;
let imageCount = <?php echo $itotal; ?>;
let regExDigit = /\d+/;

function imageLink() {
  let regExImage = /#image\d+/;
  let image = location.href;
  link = regExImage.exec(image)[0];
  link = regExDigit.exec(link)[0];
}

let next = document.getElementById('next-lightbox');
let prev = document.getElementById('prev-lightbox');

next.addEventListener('click', evt => {
  evt.preventDefault();
  imageLink();
  let newLink = Number(link) + 1;
  if (newLink > imageCount) newLink = 1;  
  location.href = location.href.replace(regExDigit, newLink);
});

prev.addEventListener('click', evt => {
  evt.preventDefault();
  imageLink();
  let newLink = Number(link) - 1;
  if (newLink < 1) newLink = imageCount;
  location.href = location.href.replace(regExDigit, newLink);
});
</script>







</div><!-- entry-content -->
</article> 
<!--</div> #post-## -->

/* 
Get the current image url, replace the number in the hash (#imageN) and return the new URL
Note the new parameter: changeBy = what to change the image number by: 1 for next, -1 for prev
*/
function imageLink(changeBy) {
  let regExDigit = /\d+/;
  var currentNum = 0;

  let currentURL = location.href;  

  var parts = currentURL.split("#");   // split URL to get main url and image hash
  var url_gallery_part = parts[0];    // e.g. http://www.example.com/photos/test-gallery-1/
  var imagehash = parts[parts.length - 1];  // e.g. image1

  // if there is a hash in the url, extract the number
  if (imagehash) currentNum = regExDigit.exec(imagehash)[0];

  // Call our function that calculates the prev/next number
  // pass in the current image number and change to change by (e.g. +1 or -1)
  newNum = getNewNum(currentNum, changeBy);

  // rebuild our full image url replacing the number with the enw number
  newImageLink = url_gallery_part + "#" + imagehash.replace(regExDigit, newNum);

  return newImageLink;
}

/* 
currentNum: the current image number
changeBy: what to change the number by, e.g. 1 for next, -1 for previous 
*/
function getNewNum(currentNum, changeBy) {
  newNum = Number(currentNum) + changeBy;  // adjust the current number
  
  // Make sure it is within the bounds of the number of images
  if (newNum > imageCount)  newNum = 1;
  else if (newNum < 1)      newNum = imageCount;

  return newNum;
}

next.addEventListener('click', evt => {
  evt.preventDefault();
  // get the full URL for next image by adding 1 to the current image
  location.href = getImage(1);   
});

prev.addEventListener('click', evt => {
  evt.preventDefault();
  // get the full URL for prev image by subtracting 1 from the current image
  location.href = imageLink(-1);
});