如何将两个有空格的单词连接到jquery元素中？答案

【问题标题】：How to concatenate two words that is having space as a word in to jquery element?如何将两个有空格的单词连接到jquery元素中？
【发布时间】：2019-10-14 10:11:00
【问题描述】：

下面的代码显示了三个要点击的链接，每个链接都需要重定向到 div。

<div class="paging-links">
    <nav>
        <ul>
            <li class="paging-item"><a href="#" class="paging-link active">First Div</a></li>
            <li class="paging-item"><a href="#" class="paging-link">Second Div</a></li>
            <li class="paging-item"><a href="#" class="paging-link">Third Div</a></li>
        </ul>
    </nav>
</div>

第一个 Div 有一些在页面加载时显示的图像

<div id="gallery-page-first div" class="gallery-page">
...... image set......

Second Div 有一些图片需要在点击“Second Div”链接时显示

<div id="gallery-page-second div" class="gallery-page hidden">
...... image set......

Third Div 有一些图像需要在单击“Third Div”链接时显示，反之亦然。

<div id="gallery-page-third div" class="gallery-page hidden">
...... image set......

我的问题是如何让带有空格的 Div 元素连接到下面的 JQuery 中？（使用此<--- 标记）

<script>
    $(document).ready(function(){
        // Handle click on paging links
        $('.paging-link').click(function(e){
            e.preventDefault();

            var page = $(this).text().toLowerCase();
            $('.gallery-page').addClass('hidden');
            $('#gallery-page-' + page).removeClass('hidden'); // <---
            $('.paging-link').removeClass('active');
            $(this).addClass("active");
        });
    });
</script>

编辑：不过，我在单词之间使用_ 字符，类似于

<li class="paging-item"><a href="#" class="paging-link active">First_Div</a></li>

和

<div id="gallery-page-first_div" class="gallery-page">
...... image set......

链接运行良好，但看起来不太好。

【问题讨论】：

gallery-page-third div 是 id 的无效值；它们不能包含空格。
所以如果我需要一个包含两个单词的 div 元素，我该如何在 JQuery 中使用它
查看data-* 属性，而不是使用.text()。基于元素的内部文本构建选择器并不是一个好主意，因为它可以改变（例如，如果用户使用 Chrome 的内置页面翻译）。
如果需要使用两个词，需要按Class添加！ .. 类支持 2 个或更多单词。
为此使用href 属性也很常见。 href="#divID"

标签： jquery html

【解决方案1】：

将 DIV 的 ID 放在 href 属性中，而不是使用文本。

<div class="paging-links">
    <nav>
        <ul>
            <li class="paging-item"><a href="#div1" class="paging-link active">First Div</a></li>
            <li class="paging-item"><a href="#div2" class="paging-link">Second Div</a></li>
            <li class="paging-item"><a href="#div3" class="paging-link">Third Div</a></li>
        </ul>
    </nav>
</div>

<div id="div1" class="gallery-page">
...... image set......
</div>
<div id="div2" class="gallery-page hidden">
...... image set......
</div>
<div id="div3" class="gallery-page hidden">
...... image set......
</div>

那么jQuery代码就是：

$(document).ready(function(){
    // Handle click on paging links
    $('.paging-link').click(function(e){
        e.preventDefault();

        var page = $(this).attr('href');
        $('.gallery-page').addClass('hidden');
        $(page).removeClass('hidden'); // <---
        $('.paging-link').removeClass('active');
        $(this).addClass("active");
    });
});

【讨论】：

上述方法对我不起作用。不过，我在单词之间使用_ 字符<li class="paging-item"><a href="#" class="paging-link active">First_Div</a></li>。这看起来不太好。
var page = $(this).attr(href); 这是正确的还是var page = $(this).attr('href');？参数是否需要单引号？
@NIMISHAN, var page = $(this).attr('href');是正确的
是的，很抱歉这个错误。

【解决方案2】：

如果我理解正确，您在使用手风琴之类的东西时遇到了问题。你可以使用这个sn-p。检查一次。

$(".tab-btn li").click(function () {
//alert('ss')
  var e = $(".tab-btn li").index(this);
  $(".tab-btn li").removeClass("active"),
  $(this).addClass("active"),
  $(".tabs").fadeOut(600).hide(),
  $(".tabs:eq(" + e + ")").fadeIn(600).show()
});

.tabs{display:none}
.tabs.active{display:block}
.tab-btn li.active{color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul class="tab-btn">
  <li class="active">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

<div class="tabs active">
  <p>Something >> 1</p>
</div>
<div class="tabs">
  <p>Something >> 2</p>
</div>
<div class="tabs">
  <p>Something >> 3</p>
</div>

【讨论】：