javascript - Javascript [もっと見る] ボタン

Question

誰かがボタンのIDを取得するためにShow Moreを押しているときにスクリプトを作成しようとしています.IDが「Show_More_ID_」で始まる場合はIDの数を取得し、クラスが「Box_Show_ID_」であるボックスを作成して詳細を表示するか、または以下

ID/クラスの例:

<div class="Box_Show_ID_1"></div>
<input type="button" id="Show_More_ID_1" value="Show More" />

これは私が現在作成しているコードですが、機能していません...

http://jsfiddle.net/UPdmH/

score 1 · Accepted Answer

http://jsfiddle.net/UPdmH/2/

基本的に、間違ったインデックスからIDを取得していました

var Box_Data_ID = ID_Split[3];

score 1 · Accepted Answer

フィドル: http://jsfiddle.net/UPdmH/3/

$(document).ready(function(){
 var Box_Data_MSG_1      = "Show More";
 var Box_Data_MSG_2      = "Show Less";
 var Box_Data_Height     = "117px";

 $("input[id*='Show_More_ID_']").click(function() {
  var Box_ID             = $(this).attr("id");
  var ID_Split           = Box_ID.split('_');
  var Box_Data_ID        = ID_Split[ID_Split.length-1];
  var Box                = ID_Split[2];

  var Button_Value       = $('#Show_More_ID_' + Box_Data_ID).attr("value");

  if(Button_Value == Box_Data_MSG_1) {
   $('#Show_More_ID_' + Box_Data_ID).attr('value', Box_Data_MSG_2);
  }

 });
});

score 0 · Accepted Answer

この Show more/less デモはどうですか? デモhttp://jsfiddle.net/yeyene/uEXvk/1/

var orgContent = $('.excerpt').html();
var txtContent = $('.excerpt').text().substr(0, 50) + '... <a id="morelink">more</a>';
$('.excerpt').html(txtContent);
$("body").on("click", '#morelink', function(){
    $('.excerpt').html(orgContent);
    $('<a id="lesslink"> less</a>').appendTo('.excerpt');
});
$("body").on("click", '#lesslink', function(){
    $('.excerpt').html(txtContent);
});

score 0 · Accepted Answer

本当に必要以上に複雑なようです。これを見てください。HTML を少し変更し、jQuery ライブラリを追加し (JavaScript としてタグ付けしましたが、jQuery を作成しています)、click() 関数を追加しました。

http://jsfiddle.net/qTNzc/

$('.btn').click(function(){
    this_id = $(this).attr('id'); 
    $('.Box_Show_ID_'+this_id).toggle();
 });

score 0 · Accepted Answer

JSFiddle は、それがリンクである場合、または別の div を明らかにすることになっている場合、[詳細を表示] ボタンで必要なものを実際に示していません

ID を ShowMoreID_1 に変更すると、少し簡単になります。

$('button').click(function(e) {
  e.preventDefault();
  var val = $(this).attr('id');
  var str = val.split('_');
  if(str[0] == 'ShowMoreID') {
     var id = str[1];
    // do stuff
  } else {
    // dont do stuff
  }
});

jQuery ライブラリを含めるように更新されました。私はあなたがやりたいと思うものにそれを微調整しました：

http://jsfiddle.net/ZQ3pD/2/

javascript - Javascript [もっと見る] ボタン

5 に答える 5

Related

Reference