隐藏字段中的JavaScript条件

Question

我有2个字段（选择社交网络和类型用户社交网络）以js为条件，所以当人们选择“其他”新字段出现并且我有一个按钮添加其他额外字段来选择另一个社交网络时，一切都运行完美但我无法让工作成为“其他”选项的第二个条件 感谢您的帮助。

function otherps() {
  if ($("#platform_social").val() !== '') {
    $("#social_user").prop('disabled', false);
    $("#social_user").prop('required', true);
  } else {
    $("#social_user").prop('disabled', true);
    $("#social_user").prop('required', false);
  }
  if ($("#platform_social").val() == "Other") {
    $("#othersocial").css("display", "block");
    $("#otherplatform").prop('required', true);
    //$("input").prop('required',true);
  } else {
    $("#otherplatform").val("");
    $("#otherplatform").prop('required', false);
    $("#othersocial").css("display", "none");
  }
}

//more social
function add_social() {
  var crd = $("#socialadded").val();
  var newblock = '<br><div class="headline">Other Social Media </div>';
  newblock += '<div class="fullrow" id="alremove' + crd + '">';
  newblock += '<div class="leftcol">';
  newblock += 'Provider / Platform:';
  newblock += '<select name="platform_social' + crd + '" id="platform_social' + crd + '">';
  newblock += '<option value="" selected="selected">&nbsp;</option>';
  newblock += '<option value="ASKfm">ASKfm</option>';
  newblock += '<option value="Facebook">Facebook</option>';
  newblock += '<option value="Flickr">Flickr</option>';
  newblock += '<option value="GitHub">GitHub</option>';
  newblock += '<option value="Google">Google+</option>';
  newblock += '<option value="Instagram">Instagram</option>';
  newblock += '<option value="JustPaste">JustPaste.it</option>';
  newblock += '<option value="LinkedIn">LinkedIn</option>';
  newblock += '<option value="Tumblr">Tumblr</option>';
  newblock += '<option value="Twitter">Twitter</option>';
  newblock += '<option value="Vine">Vine</option>';
  newblock += '<option value="VKontakte">VKontakte (VK)</option>';
  newblock += '<option value="YouTube">YouTube</option>';
  newblock += '<option value="Other">Other</option>';
  newblock += '</select>';
  newblock += '<div id="othersocial' + crd + '" style="display:none;">';
  newblock += '<br>';
  newblock += '<div>Other Platform / Provider *</div>';
  newblock += '<input type="text" name="otherplatform' + crd + '" id="otherplatform' + crd + '" /><br>';
  newblock += '</div>';
  newblock += '</div>';
  newblock += '<br>';
  newblock += '<div class="rightcol">';
  newblock += 'Social Media Identifier:';
  newblock += '<input type="text" name="social_user' + crd + '" id="social_user' + crd + '" disabled />';
  newblock += '</div>';
  newblock += '</div>';


  $("#socialextra").append(newblock);
  var whichplatform_social = "#platform_social" + crd;
  var whichsocial_usere = "#social_user" + crd;
  var whichotherplatform = "#otherplatform" + crd;
  var whichothersocial = "#othersocial" + crd;
  $(whichplatform_social).prop('required', true);
  $(whichsocial_user).prop('required', true);
  $(whichotherplatform).prop('required', true);
  $(whichothersocial).css('display', 'block');
  if ($whichotherplatform !== '') {
    $whichsocial_usere.prop('disabled', false);
    $whichsocial_usere.prop('required', true);
  } else {
    $whichsocial_usere.prop('disabled', true);
    $whichsocial_usere.prop('required', false);
  }
  if (whichotherplatform == "Other") {
    $whichothersocial.css("display", "block");
    $whichotherplatform.prop('required', true);
    //$("input").prop('required',true);
  } else {
    $whichotherplatform.val("");
    $whichotherplatform.prop('required', false);
    $whichothersocial.css("display", "none");
  }
  crd++;
  $("#socialadded").val(crd);
}

<div class="fullrow">
  <div class="leftcol">
    <div>Provider / Platform</div>
    <select name="platform_social" id="platform_social" onchange="otherps();">
     <option value="" selected="selected">&nbsp;</option>
	 <option value="ASKfm">ASKfm</option>
	 <option value="Facebook">Facebook</option>
	 <option value="Flickr">Flickr</option>
	 <option value="GitHub">GitHub</option>
	 <option value="Google">Google+</option>
	 <option value="Instagram">Instagram</option>
	 <option value="JustPaste">JustPaste.it</option>
	 <option value="LinkedIn">LinkedIn</option>
	 <option value="Tumblr">Tumblr</option>
	 <option value="Twitter">Twitter</option>
	 <option value="Vine">Vine</option>
	 <option value="VKontakte">VKontakte (VK)</option>
	 <option value="YouTube">YouTube</option>
	 <option value="Other">Other</option>
    </select>
    <div id="othersocial" style="display:none;">
      <br>
      <div>Other Platform </div>
      <input type="text" name="otherplatform" id="otherplatform" /><br>
    </div>
  </div>

  <div class="rightcol">
    <div>Social Media Identifier</div>
    <input type="text" id="social_user" name="social_user" disabled />
  </div>
</div>

<div id="socialextra"></div>

<input type="hidden" name="socialadded" id="socialadded" value="0" />
<br>
<div class="fullrow">
  <div class="leftcol">
    <span class="addtravel"><a onclick="add_social()" 
    class="button medium dark">Add Another</a>&nbsp;&nbsp;</span>
  </div>
</div>

在我尝试为额外的社交网络添加条件之前，一切都很完美。

非常感谢

Answer 1

检查摘录

library(data.table)
graph.dat <- fread(
"PH25   PH50    PH75    PH100   P25      P50    P75    P100      r_b    c
3.96    5.94    5.94    5.94    1,694   1,736   1,329   800     0.029   7
2.86    2.86    2.86    2.86    1,665   1,792   1,639   1,335   0.027   7
3.96    5.72    5.72    5.72    1,580   1,560   1,156   663     0.023   7",
data.table = FALSE)

function otherps(val) {
  if ($("#platform_social"+ val ).val() !== '') {
    $("#social_user"+ val).prop('disabled', false);
    $("#social_user"+ val).prop('required', true);
  } else {
    $("#social_user" + val).prop('disabled', true);
    $("#social_user" + val).prop('required', false);
  }
  if ($("#platform_social" + val).val() == "Other") {
    $("#othersocial" + val).css("display", "block");
    $("#otherplatform" + val).prop('required', true);
    //$("input").prop('required',true);
  } else {
    $("#otherplatform" + val).val("");
    $("#otherplatform" + val).prop('required', false);
    $("#othersocial" + val).css("display", "none");
  }
}

//more social
function add_social() {
  var crd = $("#socialadded").val();
  var newblock = '<br><div class="headline">Other Social Media </div>';
  newblock += '<div class="fullrow" id="alremove' + crd + '">';
  newblock += '<div class="leftcol">';
  newblock += 'Provider / Platform:';
  newblock += '<select name="platform_social' + crd + '" id="platform_social' + crd + '" onchange="otherps("+crd+")>';
  newblock += '<option value="" selected="selected">&nbsp;</option>';
  newblock += '<option value="ASKfm">ASKfm</option>';
  newblock += '<option value="Facebook">Facebook</option>';
  newblock += '<option value="Flickr">Flickr</option>';
  newblock += '<option value="GitHub">GitHub</option>';
  newblock += '<option value="Google">Google+</option>';
  newblock += '<option value="Instagram">Instagram</option>';
  newblock += '<option value="JustPaste">JustPaste.it</option>';
  newblock += '<option value="LinkedIn">LinkedIn</option>';
  newblock += '<option value="Tumblr">Tumblr</option>';
  newblock += '<option value="Twitter">Twitter</option>';
  newblock += '<option value="Vine">Vine</option>';
  newblock += '<option value="VKontakte">VKontakte (VK)</option>';
  newblock += '<option value="YouTube">YouTube</option>';
  newblock += '<option value="Other">Other</option>';
  newblock += '</select>';
  newblock += '<div id="othersocial' + crd + '" style="display:none;">';
  newblock += '<br>';
  newblock += '<div>Other Platform / Provider *</div>';
  newblock += '<input type="text" name="otherplatform' + crd + '" id="otherplatform' + crd + '" /><br>';
  newblock += '</div>';
  newblock += '</div>';
  newblock += '<br>';
  newblock += '<div class="rightcol">';
  newblock += 'Social Media Identifier:';
  newblock += '<input type="text" name="social_user' + crd + '" id="social_user' + crd + '" disabled />';
  newblock += '</div>';
  newblock += '</div>';


  $("#socialextra").append(newblock);
  var whichplatform_social = "#platform_social" + crd;
  var whichsocial_usere = "#social_user" + crd;
  var whichotherplatform = "#otherplatform" + crd;
  var whichothersocial = "#othersocial" + crd;
  $(whichplatform_social).prop('required', true);
  $(whichsocial_user).prop('required', true);
  $(whichotherplatform).prop('required', true);
  $(whichothersocial).css('display', 'block');
  if ($whichotherplatform !== '') {
    $whichsocial_usere.prop('disabled', false);
    $whichsocial_usere.prop('required', true);
  } else {
    $whichsocial_usere.prop('disabled', true);
    $whichsocial_usere.prop('required', false);
  }
  if (whichotherplatform == "Other") {
    $whichothersocial.css("display", "block");
    $whichotherplatform.prop('required', true);
    //$("input").prop('required',true);
  } else {
    $whichotherplatform.val("");
    $whichotherplatform.prop('required', false);
    $whichothersocial.css("display", "none");
  }
  crd++;
  $("#socialadded").val(crd);
}

这里也是工作人员。 Plunker

解决方案 我在“otherps”函数中添加了一个参数，然后在动态HTML生成时将crd解析为函数。