如何存储 attr 值以在表单中输入答案

【问题标题】：How to store attr value to input in a form如何存储 attr 值以在表单中输入
【发布时间】：2017-09-11 05:28:47
【问题描述】：

我想将我的 attr 值提交到输入字段，以便在单击提交按钮时将值提交到数据库。

jQuery 代码

  //active image setting
    $('#allimg li:first').addClass('activeimg');
  //code for like and next image  
   $('.clickme').on('click', function() {
       var tagname = $('.activeimg img').attr('name');
     $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg');

   if (tagname) {
    var result = $('#resultdiv');
    var text = result.text().trim();
    if (text) {
        text += ',';
    }
    result.text(text + tagname);
   } 
  });

    //code for next image only

    $('.nextme').on('click', function() {
        $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg');
    });

css代码

.menu_card ul {
    list-style-type: none;
}
.menu_card ul li img{
    width: 200px;
    height: 300px;
}
.menu_card ul li{
    list-style-type: none;
    position: absolute;
    display: none;
}
.menu_card ul li.activeimg{
    list-style-type: none;
    position: absolute;
    display: block;
}

html代码

  <form method="post" action="">
       <div class="row">
        <div class="col-12">
           <div class="menu_card">
             <ul id="allimg">
               <li><img name="one" src="imges/img1.jpg"></li>
                <li><img name="two" src="imges/img2.jpg"></li>
                  <li><img name="three" src="imges/img3.jpg"></li>
                <li><img name="four" src="imges/img4.jpg"></li>
               <li><img name="five" src="imges/img5.jpg"></li>
             </ul> 
           </div>  
        </div>  
      </div>
       <div class="row">
           <!--- button / next button-->
            <div class="col-1" style="margin-top: 350px;color:red">
               <div class="pull-right nextme">
                   <i class="fa fa-thumbs-o-down fa-3x"></i> <br/>
                    Unike
               </div>
            </div>
            <!---Like button / next button (one button for all image)-->
            <div class="col-2" style="margin-top:350px;color:green">
               <div class="pull-right clickme">
                   <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
                    Like
               </div>
            </div>
         </div>
        <div class="row">
         <div class="col-12 text-center" id="resultdiv">
             <input type="hidden" value="">
         </div> 
        </div>

        <br/>
        <input type="submit" class="btn btn-success">
      </form>

在此代码中，我可以在单击“赞”按钮时看到 attr 值

请帮帮我。

【问题讨论】：

就您的代码而言，它会编写最少的代码并解释需要什么。 var tagname = $('.activeimg img').attr('name'); // 用于获取 attr 值或使用 prop() 函数获取值并分配给输入元素 $('input').val(tagname) //
您是否尝试过在表单上使用.submit 事件来提交表单并根据您的要求从属性值发送数据？
是的，我已经尝试过，但做不到太多。通过我的代码，我可以在 div 中显示 attr 值，现在我只想将 attr 值存储为输入字段值。如何做到这一点

标签： jquery html forms input attr

【解决方案1】：

我对您的代码进行了一些更改。如果你想要这个。

//active image setting
var vals = '';
    $('#allimg li:first').addClass('activeimg');
  //code for like and next image  
   $('.clickme').on('click', function() {
       var tagname = $('.activeimg img').attr('name');
     $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg');

   if (tagname) {
   vals += tagname+',';
   $('.vals').val(vals);
   
   // var result = $('#resultdiv');
   // var text = result.text().trim();
    //if (text) {
     //   text += ',';
    //}
   // result.text(text + tagname);
   } 
  });

    //code for next image only

    $('.nextme').on('click', function() {
        $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg');
    });
    $('.submitBTN').on('click', function() {
        
        alert(vals);
    });

.menu_card ul {
    list-style-type: none;
}
.menu_card ul li img{
    width: 200px;
    height: 300px;
}
.menu_card ul li{
    list-style-type: none;
    position: absolute;
    display: none;
}
.menu_card ul li.activeimg{
    list-style-type: none;
    position: absolute;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
       <div class="row">
        <div class="col-12">
           <div class="menu_card">
             <ul id="allimg">
               <li><img name="one" src="https://dummyimage.com/600x400/555/fff"></li>
                <li><img name="two" src="https://dummyimage.com/600x400/000/fff"></li>
                  <li><img name="three" src="https://dummyimage.com/600x400/536/fff"></li>
                <li><img name="four" src="https://dummyimage.com/600x400/698/fff"></li>
               <li><img name="five" src="https://dummyimage.com/600x400/742/fff"></li>
             </ul> 
           </div>  
        </div>  
      </div>
       <div class="row">
           <!--- button / next button-->
            <div class="col-1" style="margin-top: 350px;color:red">
               <div class="pull-right nextme">
                   <i class="fa fa-thumbs-o-down fa-3x"></i> <br/>
                    Unike
               </div>
            </div>
            <!---Like button / next button (one button for all image)-->
            <div class="col-2" style="margin-top:350px;color:green">
               <div class="pull-right clickme">
                   <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
                    Like
               </div>
            </div>
         </div>
        <div class="row">
         <div class="col-12 text-center" id="resultdiv">
             
         </div> 
         <input type="hidden" class="vals" value=''>
        </div>

        <br/>
        <input type="submit" class="btn btn-success submitBTN">
      </form>

【讨论】：

【解决方案2】：

将Id 添加到隐藏输入<input id="data" type="hidden" value="">

改变这个

<script>
if (tagname) {
                var result = $('#data');
               var text = result.val(); 
               if (text) {
                        text += ',';
                    }   
               result.attr('value',text + tagname);
</script>

【讨论】：

它实际上创建了单独的输入字段，我希望将它们全部存储在一个输入字段中，例如一、二、三、四、五