在“ReadMore ...”触发器中连接文本

I'm trying to extract text in its entirety for a product description tag in GTM (deploying structured data, yada yada). The problem I'm facing is that half of the text I'm trying to extract exists within a "Read More..." link on product pages.

我正在尝试为GTM中的产品描述标签提取整个文本(部署结构化数据,yada yada)。我面临的问题是,我试图提取的文本的一半存在于产品页面上的“阅读更多...”链接中。

The layout of the elements on the page after it has rendered are:

呈现后页面上元素的布局是:

<p class="product-description">
"This is the first part of the description of this product! It is read, warm,"
   <span class="morecontent" display="inline"> //inline when expanded, none when clicked
     <span class="readmore-description">
        "fuzzy, and black."
     </span>
    <a class="more-link">&nsbp;Less</a> //&nsbp;Less when expanded, &nsbp;Read More.. when clicked
  </span>
 </p>

I've not gotten far... all I've tried so far is:

我没有走得太远......到目前为止我所做的一切都是:

function() {

  var description = document.querySelector("p.product-description");

  return description;

}

I'd like to get "This is the first part of the description of this product! It is read, warm, fuzzy, and black." back.

我想得到“这是该产品描述的第一部分!它是阅读,温暖,模糊和黑色。”背部。

Thanks!

1 个解决方案

#1

I used a class on content called hidden. When that class exists, content is hidden, when it doesn't exist, content displays. Think of it as a switch.

我在一个名为hidden的内容上使用了一个类。当该类存在时,内容将被隐藏,当内容不存在时,将显示内容。把它想象成一个开关。

$('.more-link').on('click', function(e){
  e.preventDefault();
  $('.morecontent').toggleClass('hidden');
  if ($('.morecontent').hasClass('hidden')) {
    $('.more-link').html('More');  
  }
  else {
    $('.more-link').html('Less'); 
  }
});

.hidden {
  display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="product-description">
"This is the first part of the description of this product! It is read, warm,"
   <span class="morecontent hidden" display="inline"> 
     <span class="readmore-description">
        "fuzzy, and black."
     </span>
  </span>
  <a href="#" class="more-link">More</a>
 </p>