从 div 类中的 href 获取标题答案

【问题标题】：Getting title from href in a div class从 div 类中的 href 获取标题
【发布时间】：2013-12-31 06:30:16
【问题描述】：

我无法从名为 swatch 的 div 类中获取标题，因此我最终可以将其传递给添加到购物篮按钮。

下面是 Div 类：

<h4>Choose a Color:</h4>
<div class="swatch">
<a rel="0,255,0" href="#mask" class="scp" title="Green">Single Colour Green </a>
<a rel="255,255,0" href="#mask" class="scp" title="Yellow">Yellow</a>
<a rel="255,85,15" href="#mask" class="scp" title="Orange">Orange</a>
<a rel="0,0,255" href="#mask" class="scp" title="Blue">Blue</a>
<a rel="155,0,255" href="#mask" class="scp" title="Purple">Purple</a>
<a rel="255,0,0" href="#mask" class="scp" title="Red">Red</a>
</div>

这是我无法为我完成顶级工作的脚本：

div id="cp"></div>
<script type="text/javascript">
$(document).ready(function(){
var title = $(this).attr('title');

  if (title.length != 0) {
      $('#cp').text(title);
  }
setTimeout(function () {
    // Run function with var title
    //window.location = url;
}, 2000);
});
</script>

我正在混合使用这两个来源的代码....

http://sandbox.nikorablin.com/productColorizer/

jQuery: Get title and href values as variables

目前我只想显示已经改变了图像颜色的我还有一些文本显示在下面的标题。

最终我想将标题传递给销售页面上的“添加到购物车”按钮。

任何帮助将不胜感激。

谢谢

【问题讨论】：

感谢您的回复。我检查了你的例子，它工作得很好。当我试图在我的网站中实现它时，它崩溃了。我认为部分问题是我的页面使用了一个函数，该函数使我的 div 类样本显示为颜色块而不是文本单词。我所做的演示：jsfiddle.net/GLCub/2

标签： html href title

【解决方案1】：

我假设您需要从“单击”的锚点获取标题 attr，在这种情况下，您需要绑定到锚点的单击事件，然后在该处理程序中 $(this).attr('title') 将为您提供正确的事物。比如：

$('a').on('click', function () {
    var title = $(this).attr('title');
    $('#cp').text(title);
});

编辑：

如果您想“预处理”您的锚点以将标题属性用作另一个元素中的类或颜色，您可以首先获取页面中的所有锚点（例如所有具有标题属性的锚点）和做同样的事情：

$('a[title]').each(function() {
    var title = $(this).attr('title');
    $('#cp').addClass(title); // not sure what you want to do here
});

【讨论】：

感谢您的回答。是的|我需要标题属性，但是锚是一个函数，它产生一个与标题名称相对应的彩色块，即绿色、蓝色、红色等。当我尝试这段代码时，它似乎什么也没做。这是因为它不是这样的链接吗？你真的需要转到sandbox.nikorablin.com/productColorizer 来了解我正在尝试什么，因为我没有很好地解释自己。
不完全确定我理解你想要做什么（你所指的页面有几个功能，不确定你遇到了什么问题），但如果你看到我的编辑这就是你需要的。

【解决方案2】：

这可能对你有帮助：

$( "a" ).click(function() {
  var title = $(this).attr('title');

  if (title.length != 0) {
  $('#cp').text(title);
 }
 setTimeout(function () {
// Run function with var title
//window.location = url;
}, 2000);
});

演示：http://jsfiddle.net/ggbhat/GLCub/

【讨论】：

感谢您的回答，我检查了您的代码，它适用于您的示例，但是当我尝试移动它时，它不起作用。我已经在上面发表了评论，堆栈溢出不会让我再发布 8 小时。