试图使用JavaScript来填充按钮类的标签 [英] Trying to use javascript to fill a tag of button class

问题描述

编辑3：我只是要重新开始。

我无法发布两个链接，但我使用的主题是来自themeforest的红色墨水，我正在处理的页面是投资组合页面，如果您想要谷歌它。

当你点击其中一个投资组合项目，比如True Gangsters时，所有的信息都从div中拉出来并插入到前面的部分进行格式化。

我想要做的就是为这些投资组合项目添加一个按钮，并且能够从div中取出链接并将其格式化为一个按钮。

在jsfiddle中我包含格式化的div和真正的帮派部分，格式化的div从它获取信息。

我还包括了所有的组件部分的javascript，但我很确定这是重要的部分：

  //更新文本信息函数updateText（current）{var title = current.attr（'data-title'）; var desc = current.attr（'data-description'）; var date = current.attr（'data-date'）; 。controls.find（ H2’ ）HTML（标题）; 。controls.find（ P）的HTML（降序）; controls.find（'。date .day'）。html（date.split（'，'）[0]）; controls.find（'。date .month'）。html（date.split（'，'）[1]）; controls.find（'。date .year'）。html（date.split（'，'）[2]）; } //结束更新文本信息 

demo

事实证明这比我想象的要复杂得多。

---

---

旧节，忽略我：

所以我试图使用javascript从网页的另一部分获取一段代码，然后将其插入到另一部分中以在 p>

 < div class =button>< / div> 
 
 
< div class =getVid
 data-epdLink =CdDDY5nVA3A
> 
  

所以我想从getVid div中获取一段代码并将其放入按钮div中一个链接。

所以我有这样的JavaScript：

  var endLink = current.attr（'data-epdLink'）; 
 
 var fullLink ='< a href =https://www.youtube.com/watch?v='+ endLink +'>点击视频< / a> ; 
 
 controls.find（'button'）。html（fullLink）
  

它似乎没有工作。我之前使用过这种类型的东西来插入标题和文本，但我认为有一些不同的东西需要插入代码。

任何想法？

这里有一个小提琴的链接，如果有帮助的话：[JSFiddle] [3]
$ b 编辑

忘了提及将会有多个getVid类，因此它取决于我打开了哪一个类，并且data-epdLink对于每个类都是不同的。 p>

编辑2

好的，在我新的jsfiddle中可以看到所有的格式是在html标记的vid项目格式的顶部。接下来的两个项目分别标记了vid项目使用javascript从vid格式化部分拉取信息。这段代码来自一个模板，所以我不完全确定发生了什么，但是我包含了改变每个vid项目部分图像的javascript，因为我认为我可以使用这些行中的某些内容来更改按钮链接。您可以在vid格式化部分的两个表格后面看到按钮div。

新的jsfiddle在这里：[new js fiddle] [4]

编辑3：我只是要重新开始。
首先在这里是我使用的模板[红色墨水模板] [1]

当您点击其中一个投资组合项目，如True Gangsters该信息从div中拉出并插入到前一节中进行格式化。

我想要做的就是为这些投资组合项目添加一个按钮，并且能够从div中取出链接并将其格式化为一个按钮。

这证明比我想象的要复杂得多。

解决方案

首先，您需要关闭 .getVid div。这是使用 data（） 方法来访问 data - 属性：

  var endLink = current。数据（ 'epdlink'）; 
 
 var fullLink ='< a href =https://www.youtube.com/watch?v='+ endLink +'>点击视频< / a> ; 
 
 controls.filter（'。button'）。html（fullLink）; 
  

您会以小写字母 edplink 。我相信你的变量 controls 是html元素的集合，所以无论何时你必须在预先选择的集合中使用

演示

edit 3: I'm just going to kind of start over.

I can't post two links but the theme I'm using is Red Ink from themeforest and the page I'm working on is the portfolio page if you want to google it.

When you click one of the portfolio items like "True Gangsters" all the info is pulled from the div and plugged into a previous section for formatting.

All I want to do is add a button to these portfolio items and be able to pull the link from the div and have it formatted into a button.

in the jsfiddle I included the formatted div and the "true gangsters" section that the formatted div gets its info from.

I also included all of the portfolio part javascript but I'm pretty sure this is the important part:

//Update text info
	    function updateText(current) {

	      var title = current.attr('data-title');
	      var desc = current.attr('data-description');
	      var date = current.attr('data-date');

	      controls.find('h2').html(title);
	      controls.find('p').html(desc);
	      controls.find('.date .day').html(date.split(',')[0]);
	      controls.find('.date .month').html(date.split(',')[1]);
	      controls.find('.date .year').html(date.split(',')[2]);

	    } //End Update text info

demo

This is proving to be more complicated than I thought it would be.

---

---

Old section, ignore me:

So I'm trying to use javascript to get a chunk of code from another part of the webpage and then insert it into a different part to create a link on

<div class="button"></div>


<div class="getVid"
   data-epdLink="CdDDY5nVA3A"
>

so I want to get the piece of code from the getVid div and put it into the button div as a link.

so I have this bit of JavaScript:

var endLink = current.attr('data-epdLink');

var fullLink = '<a href="https://www.youtube.com/watch?v=' + endLink +'">"Click for Video"</a>';

controls.find('button').html(fullLink)

It doesn't seem to work. I've used this type of thing before to insert headers and text but I'm thinking there's something different I've got to do to insert code.

Any ideas?

Here's a link to fiddle if that helps: [JSFiddle][3]

Edit

Forgot to mention that there will be multiple getVid classes so it depends on which one I have open and the data-epdLink will be different for each.

Edit 2

Ok so in my new jsfiddle you can see that all of the formatting is in the top part of the html labeled vid item formatting. The next two items each labeled vid item pull info from the vid formatting section using javascript. This code is from a template so I'm not entirely sure what's going on but I included the javascript that changes the image on each vid item section because I think I could change the button link using something along those lines. You can see the button div right after both of the tables in the vid formatting section.

New jsfiddle here: [new js fiddle][4]

edit 3: I'm just going to kind of start over. First off here's the template I'm using [Red Ink Template][1]

When you click one of the portfolio items like "True Gangsters" all the info is pulled from the div and plugged into a previous section for formatting.

All I want to do is add a button to these portfolio items and be able to pull the link from the div and have it formatted into a button.

This is proving to be more complicated than I thought it would be.

解决方案

First, you need to close your .getVid div. It is a best practice to use data() method to access data- attributes:

var endLink = current.data('epdlink');

var fullLink = '<a href="https://www.youtube.com/watch?v=' + endLink +'">"Click for Video"</a>';

controls.filter('.button').html(fullLink);

You will get it as lowercase, e.g. edplink. I believe that your variable controls is a collection of html elements, so whenever you have to search in a pre-selected collection use .filter().

Demo

这篇关于试图使用JavaScript来填充按钮类的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！