Question

有人可以说明如何将titles类的InnerHTML更改为alt属性。对于实际网站jarretonions.co.za

由于

>>> df

  Column1  Column2 Column3  Column4
0   Item1   Value1   Item2   Value2
1   Item3   Value3   Item4   Value4
2   Item5   Value5   Item6   Value6
3   Item7   Value7   Item8   Value8
4   Item9   Value9  Item10  Value10
5  Item11  Value11  Item12  Value12
6  Item13  Value13  Item14  Value14

df[['Column1','Column2']].append(df[['Column3','Column4']].rename(columns={'Column3':'Column1','Column4':'Column2'})).sort_index().reset_index(drop=True)

   Column1  Column2
0    Item1   Value1
1    Item2   Value2
2    Item3   Value3
3    Item4   Value4
4    Item5   Value5
5    Item6   Value6
6    Item7   Value7
7    Item8   Value8
8    Item9   Value9
9   Item10  Value10
10  Item11  Value11
11  Item12  Value12
12  Item13  Value13
13  Item14  Value14

+

            $(document).ready(function() {

          $(".pic").on("click", function() {
            $(".modal").show();
            var srclong = $(this).attr("src");
            var srcshort = srclong.split("_");
            var srcextension= srclong.split(".");
            $(".modal img").attr("src", srcshort[0]+'.'+srcextension[1]);
        ************is it something like this********
                var title = $(this).attr("alt");
                $(".modal span").InnerHTML= title;

          OR 
               document.getElementByClassName('titles').innerHTML = title; 
          })

Answer 1

由于您正在使用JQuery，因此可以使用$(".title")选择这些元素并直接更改它们。像这样：

$(document).ready(function() {
  $(".pic").on("click", function() {
    $(".title").text( $(this).attr("alt") );
})});

这是一个小提琴：https://jsfiddle.net/wmjtfLja/1/

请注意，如果您有多个类.title的元素，它们都会发生变化。因此，您可能希望按ID或相对路径选择标题元素。

Answer 2

提前意识到，提供一个没有（表面上）与问题完全一致的答案的危险，我对melpomene的评论感到震惊，我最初认为这些评论指的是jquery中不存在的东西。

melpomene是100％正确的，因为getElementByClassName不存在。正确的语法是getElementsByClassName。

话虽如此，helloworld也是正确的（抛开语法错误），因为为每个小任务加载jquery真的是redundent，并且可以通过类操作，只需要几十行纯javascript。

但是，按类别获取元素存在危险，因为返回是“活着”。阵列。

例如，对于dylan的原始问题，按类获取仅对返回第一个实例有用（数组长度只是它应用了多少元素的指南）。因此，为了让dylan按照他的建议进行更改，每个都需要自己的按钮。（这也意味着，迈克尔，当你说它会影响所有具有相同类名的元素时，我认为你是不正确的 - oth，你完全正确地注意到在运行循环时应该为其他值（或更改类名）在属性上）。

考虑以下内容（即时更改）;

function otf_cls_change(cls_original,cls_replace){
var a=document.getElementsByClassName(cls_original);
l=a.length;
if (l==0){return 0;}
do {
  a[0].setAttribute('class',cls_replace); 
  a=document.getElementsByClassName(cls_original);
  l=a.length;
} while (l>0);
}

这对于动态更改类名有效。

但是，如果我们修改代码和

//change this a[0].setAttribute('class',cls_replace);  // to  
a[0].innerHTML='this_html';

这将导致浏览器无限循环。

为什么呢？因为ElementByClass返回的实时数组只会处理第一个项目（即使你试图循环数组）。

因此，虽然动态更改课程很有趣且非常可行，但我强烈建议使用它来更改任何不属于类ID的attrib是一个坏主意。

将类别与结合更改为另一个attrib很好。例如，

a[0].innerHTML='this_html'; //do this first a[0].setAttribute('class',cls_replace); //then this

以上将用于循环类定义的元素。

在一个大规模的个人虚伪的点上，当人们要求纯粹的javascript解决方案时，我会感到恼火，然后一些与jquery一起使用。我想我在这里做了相反的事情，因为很明显，这个问题与jquery相关，而且我在这里扔掉了纯粹的javascript。抱歉，那个。
顺便说一下，迪伦，祝你好运。很高兴你重新回答负面评论。这里有太多人害怕犯罪，最终被欺负。

HTH，

加里

如何将InnerHtml更改为属性

2 个答案: