代码之家 › 专栏 › 技术社区 › user8579791

如何将属性值存储到表单中的输入

attr input forms html jquery

user8579791 · 技术社区 · 7 年前

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');
    });

货物堆装与系固安全操作规则

.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>

请帮帮我。

2 回复 | 直到 7 年前

Klaus Mikaelson 7 年前

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

//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>

Rakesh Raj 7 年前

添加 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>